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.