Why am I not being able to compile SASS with Webpack?
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 ofsass
, assass
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.
PedroD
I'm a computer scientist specialized in robotics and automation.
Updated on June 14, 2022Comments
-
PedroD almost 2 years
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