Vue.js + Webpack + vue-loader + bootstrap-sass + sass-loader

Question

I'm just getting started with Vue.js + Webpack + vue-loader + bootstrap-sass + sass-loader and I'm a little lost.

What I'd like to do is use the SASS version of bootstrap with my SPA Vue.js code. I want to do this so my bootstrap customisations can be done using SASS. Here is what I've done:

• Created a new Vue.js + webpack project with vue-cli.
• Installed bootstrap-sass and sass-loader.

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

   { test: /\\.scss$/, loaders: [ 'style', 'css', 'sass' ] }, { test: /\\.(woff2?|ttf|eot|svg)$/, loader: 'url', query: { limit: 10000 } } 

• Created src/style.scss with one line: @import 'bootstrap';

• Added this line to the top of src/main.js: import './style.scss'

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

ERROR in ./src/main.js
Module not found: Error: Cannot resolve module 'style' in  Users/rstuart/Workspace/javascript/kapiche-demo/src
@ ./src/main.js 3:0-25

I'm not sure why this isn't working.

Also, related to this question, how do I get access to Bootstrap SASS variables inside my Vue components? If I understand what is going on here, the SASS will be compiled to CSS before being included inline in main.js meaning there is no access to any Bootstrap variables in my components. Is there a way to achieve this?

Answer 1

I managed to solve this problem myself. Instead of trying to directly import style.scss , I deleted the file entirely and I replaced the <style> element of App.vue with the following:

  <style lang="sass">
    $icon-font-path: "../node_modules/bootstrap-sass/assets/fonts/bootstrap/";
    @import '../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap';

    .wrapper {
      margin-top: $navbar-height;
    }
  </style>

This has the added bonus of making Bootstrap variables available in the style block of Vue components. Also, I removed { test: /\\.scss$/, loaders: [ 'style', 'css', 'sass' ] } from webpacker.base.conf.js entirely but kept the bit dealing with fonts. The loader for .vue files already deals with sass.

Answer 2

I managed to worked it the right way like this:

Vue:

<style lang="sass">
    $icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
    @import "~bootstrap-sass/assets/stylesheets/bootstrap";
</style>

webpack config loader:

    {
      test: /\.(png|jpg|gif|svg)$/,
      loader: 'file-loader',
      options: {
        name: '[name].[ext]?[hash]'
      }
    },
    { 
      test: /\.scss$/, 
      loaders: [ 'style-loader', 'css-loader', 'sass-loader' ] 
    },
    { 
      test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
      loader: "url-loader?limit=10000&minetype=application/font-woff" 
    },
    { 
      test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
      loader: "file-loader" 
    }

Take note that I use the bootstrap-sass and not the default boostrap

Answer 3

It's trying to resolve the style module that you specified as a loader in this section of your webpack.base.conf.js:

{ test: /\\.scss$/, loaders: [ **'style'**, 'css', 'sass' ] }

Given that you have a css and sass loader, that's likely an erroneous entry that you can remove to get yourself going.