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

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.

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

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.