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

Gulp - Workaround SCSS compiled for Vue Webpack 2

0 votes
added Nov 7, 2017 in Gulp by LC Marshal First Warrant Officer (9,130 points)
edited Nov 16, 2017 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.


Please log in or register to response this reference. - Malaysia based Knowledge Exchange Platform, where you can share your finding or solution with other members of community.