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: projectRoot,         exclude: /node_modules/       },       {         test: /\.js$/,         loader: 'eslint',         include: projectRoot,         exclude: /node_modules/       }     ],     loaders: [       {         test: /\.vue$/,         loader: 'vue'       },       {         test: /\.js$/,         loader: 'babel',         include: projectRoot,         exclude: /node_modules/       },       {         test: /\.json$/,         loader: 'json'       },       {         test: /\.html$/,         loader: 'vue-html'       },       {         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,         loader: 'url',         query: {           limit: 10000,           name: utils.assetsPath('img/[name].[hash:7].[ext]')         }       },       {         test: /\.scss$/,         loaders: ['style', 'css', 'sass']       },       {         test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,         loader: 'url',         query: {           limit: 10000,           name: utils.assetsPath('fonts/[name].[hash:7].[ext]')         }       }     ]   }, 

You can see that I am using sass-loader, and for *.scss files I am defining this pipeline: ['style', 'css', 'sass'].

Then I have my scss file:

html {   height: 100%; }  body {   display: flex;   align-items: center;   justify-content: center;   height: 100%; }  (...) 

Finally I have my HTML page (in a VUE file from vue.js) which imports that scss file:

<script>  require('./styles/main.scss')  (...)  </script> 

But somehow I get this error when launching the project:

ERROR in ./~/css-loader!./~/sass-loader!./~/style-loader!./~/css-loader!./~/sass-loader!./src/styles/main.scss Module build failed: html { ^       Invalid CSS after "...load the styles": expected 1 selector or at-rule, was "var content = requi"       in /Users/td/uprank/src/styles/main.scss (line 1, column 1)  @ ./src/styles/main.scss 4:14-247 13:2-17:4 14:20-253 

Why is it getting the pipeline wrong? (It appears webpack is trying to process ['css', 'sass', 'style', 'css', 'sass'] instead of just ['style', 'css', 'sass'] as configured in modules.

What am I doing wrong?

Thanks!

EDIT: Link to the full example project: https://dl.dropboxusercontent.com/u/1066659/dummy.zip

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.