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 · Accepted Answer · 2018-10-15 13:05:22Z

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.

I want to use bootstrap-vue/webpack template. I do not want use bootstrap-vue/webpack-simple. In bootstrap-vue/webpack I do not have a question about Sass.
@Cichy I've extended the answer to cover boostrap-vue/webpack looks like that project has sass-loader dependency conflicts

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related