Why am I not being able to compile SASS with Webpack?

Question

I have the following modules in my Webpack config:

module: {
    preLoaders: [
      {
        test: /\\.vue$/,
        loader: \'eslint\',
        include:          


        

Answer 1

The reason this is happening, is because Vue automatically generates loader configurations for CSS, SASS/SCSS, Stylus.

(See projectRoot/build/utils.js lines ~10 through ~50)

So you're seeing the error because you have a webpack loader that is attempting to import the file and then Vue is attempting to import the (already loaded) file. So you can think of your loader chain as sass -> css -> style -> sass -> css -> vue-style

In order to resolve this issue you have to get rid of the loader that you added:

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

and just rely on the provided loader.

You can load your stylesheet in one of two ways:

NOTE: You MUST use scss instead of sass, as sass will attempt to parse your stylesheet using the indented syntax instead of the bracket syntax.

1:

<style lang="scss">
  @import './styles/main.scss
</style>

2:

<style src="./styles/main.scss"></style>

Both of these will import the stylesheet, the latter just prevents you from adding any additional styling to the component.