Are you first timer at lazacode.org? Why not join us and start exchange your knowledge with everyone. Register today!

Gulp - Workaround SCSS compiled for Vue Webpack 2

0 votes
4 views
added Nov 7 in Gulp by LC Marshal Second Warrant Officer (3,200 points)
edited Nov 16 by LC Marshal

Install gulp in directory : npm i gulp

Setup and configure gulp in your project directory. 
Gulpfile.js - edit the build directory to static/ since its native path in Vue.

// folders
  folder = {
    src: 'src/',
    build: 'static/'
  }

Gulpfile.js - Edit the source of .scss path 
return gulp.src(folder.src + 'scss/main.scss')

App.vue - Remove the following style tags from src/App.vue (if you did so)
<style lang="scss">
  @import 'scss/main.scss';
</style>

Main.js - Remove load class from src/main.js ( if you did so)

Index.html - Add the class to <head> in your index.html  <link rel="stylesheet" type="text/css" href="/static/css/main.css">

src/main.scss node_modules dependencies - gulp css task

  • Do not import the src with .vue method e.g @import "~vue-nav-tabs/themes/vue-tabs";
  • Instead use full path e.g @import "../../node_modules/vue-nav-tabs/dist/vue-tabs.min";

gulp css in shell, follow by npm run dev to view the changes locally.

Done.

   

Please log in or register to response this solution.

...