title: Use custom SCSS with Bootstrap-Vue + Webpack + Vue.js
body: <p>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.</p>
  
  <p>Here is what I have so far:</p>
  
  <ul>
  <li>Installed node-sass, sass-loader and css-loader</li>
  </ul>
  
  <p><code>npm install node-sass sass-loader css-loader --save-dev</code></p>
  
  <ul>
  <li>Added the following to build/webpack.base.conf.js</li>
  </ul>
  
  <p><code>{ test:/\.(s*)css$/, use:['style-loader','css-loader', 'sass-loader']}</code></p>
  
  <ul>
  <li>Created a SCSS file in src/assets/scss/app.scss</li>
  </ul>
  
  <p>main.js</p>
  
  <pre><code>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: '&lt;App/&gt;'
  })
  
  &lt;style lang="scss"&gt;
    @import './assets/scss/app.scss';
  &lt;/style&gt;
  </code></pre>
  
  <p>When I run <code>npm run dev</code> I get the following error:</p>
  
  <pre><code>ERROR  Failed to compile with 1 errors                                                      21:05:54
  
   error  in ./src/main.js
  
  Syntax Error: Unexpected token, expected ; (29:7)
  
    27 | })
    28 |
  &gt; 29 | &lt;style lang="scss"&gt;
       |        ^
    30 |   @import './assets/scss/app.scss';
    31 | &lt;/style&gt;
    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: '&lt;App/&gt;'
      })
  
      &lt;style lang="scss"&gt;
        @import './assets/scss/app.scss';
      &lt;/style&gt;
  </code></pre>
  
  <p>I am not sure why it is not working. I have tried various solutions on Github and Stack Overflow.</p>
  
  <p>Any help would be appreciated.</p>