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
– Nephelococcygia, Commented May 28, 2018 at 12:01

Ohgodwhy · Accepted Answer · 2018-10-14 03:29:50Z

2

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.

edited Oct 14, 2018 at 3:29

answered May 28, 2018 at 1:40

Ohgodwhy

50.9k11 gold badges86 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Kumaran S Over a year ago

I also had to remove { test:/\.(s*)css$/, use:['style-loader','css-loader', 'sass-loader']} from build/webpack.base.conf.js.

Cichy Over a year ago

I added file assets/scss/app.scss and I get ERROR "This relative module was not found: ./assets/scss/app.scss in ./src/main.js"

Ohgodwhy Over a year ago

@Cichy Not much information to go on there, I don't know what your directory structure looks like.

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related