How can I add SASS file to bootstrap-vue/webpack (vue-cli project)?

Question

I initialized a project based on Bootstrap-Vue and vue-cli template (webpack) and I do not know how can I add my custom SCSS files to this project.

I create file src/assets/scss/app.scss and I added import './assets/scss/app.scss' to src/main.js file:

import Vue from 'vue'
import BootstrapVue from "bootstrap-vue"
import App from './App'
import router from './router'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import './assets/scss/app.scss' // HERE IS MY CHANGE!!!

Vue.use(BootstrapVue)
Vue.config.productionTip = false

new Vue({
   el: '#app',
   router,
   template: '<App/>',
   components: { App }
})

but I got ERROR:

This relative module was not found:
* ./assets/scss/app.scss in ./src/main.js

Richard Creek Richard Creek · Accepted Answer · 2018-10-13T12:42:19

Running

vue init bootstrap-vue/webpack-simple project-name

has 'Use sass?' as the fourth option, choosing 'Yes' only configures webpack to extract scss from vue components. To use a stand-alone scss file you'll need to add an extra rule to the webpack.config.js file, e.g.

  {
    test: /\.scss$/,
    use: [
        "style-loader",
        "css-loader",
        "sass-loader"
    ]
  }

I hope that helps.

When I tried with

vue init bootstrap-vue/webpack project-name

The utils.js file contains the sass-loader needed for stand-alone scss files like the one you're trying to import, but when I ran

npm run build

I got a slightly different error to yours:

ERROR in ./src/main.js Module not found: Error: Can't resolve 'sass-loader'

I then tried:

npm install sass-loader --save

but got:

npm WARN [email protected] requires a peer of webpack@^3.0.0 || ^4.0.0 but none is installed. You must install peer dependencies yourself.

If you look in the package.json it's using

"webpack": "^2.6.1",

So it looks like bootstrap-vue/webpack has some dependency problems at the moment.

How can I add SASS file to bootstrap-vue/webpack (vue-cli project)?

1 Answers