Gulp - Workaround SCSS compiled for Vue Webpack 2

0 votes
added Nov 7, 2017 in Gulp by LC Marshal Captain (25,790 points)
edited Jul 19, 2018 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';


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. - Malaysia's programming knowledge sharing platform, where everyone can share their finding as reference to others.