Use custom SCSS with Bootstrap-Vue + Webpack + Vue.js

Question

I'm creating an application using VueJS with Bootstrap-Vue. I am trying to import SCSS file to override the Bootstrap variables as well as another SCSS for custom styles.

Here is what I have so far:

Installed node-sass, sass-loader and css-loader

npm install node-sass sass-loader css-loader --save-dev

Added the following to build/webpack.base.conf.js

{ test:/\.(s*)css$/, use:['style-loader','css-loader', 'sass-loader']}

Created a SCSS file in src/assets/scss/app.scss

main.js

import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
import App from './App'
import router from './router'
import fontawesome from '@fortawesome/fontawesome'
import light from '@fortawesome/fontawesome-pro-light'

Vue.use(BootstrapVue)

Vue.config.productionTip = false

fontawesome.library.add(light)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

<style lang="scss">
  @import './assets/scss/app.scss';
</style>

When I run npm run dev I get the following error:

ERROR  Failed to compile with 1 errors                                                      21:05:54

 error  in ./src/main.js

Syntax Error: Unexpected token, expected ; (29:7)

  27 | })
  28 |
> 29 | <style lang="scss">
     |        ^
  30 |   @import './assets/scss/app.scss';
  31 | </style>
  32 |



 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

    fontawesome.library.add(light)

    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      components: { App },
      template: '<App/>'
    })

    <style lang="scss">
      @import './assets/scss/app.scss';
    </style>

I am not sure why it is not working. I have tried various solutions on Github and Stack Overflow.

Any help would be appreciated.

Your file is a file.js and you need to use Single file component to be able to use scss as you intended to. You need to convert your file to file.vue instead then you would be able to use <template/><script/><style/> — Nephelococcygia

Ohgodwhy Ohgodwhy · Accepted Answer · 2018-05-28T01:40:24

You can't write style tag in javascript like this. You need to either move it to a vue file and attach a loader to it, or use a standard import:

import './assets/scss/app.scss';

Without the style tags or the @ symbol.

Use custom SCSS with Bootstrap-Vue + Webpack + Vue.js

1 Answers