Closed s4malve closed 3 years ago
Wrong loader order:
{
test: /\.(sc|sa|c)ss/i,
use: [
devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader',
],
},
in your example, but after fixing this, all works fine. Based on your error, you apply style-loader
and mini-css-extract-plugin
together, but you should not do it, check your module order. We have small example https://github.com/webpack-contrib/mini-css-extract-plugin#recommend, you don't need MiniCssExtractPlugin
when you use style-loader
. Feel free to feedback.
Now that you mentioned it I thought the same and after fix it and push the changes, I have this error
Compiled with problems:
Error:
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "// Imports": expected 1 selector or at-rule, was "import ___CSS_LOADE"
on line 1 of src/components/App/main.scss
>> // Imports
I clarify that my main.scss file is still empty
If you need help, please provide repo with reproducible problem, your repo works fine
Works fine:
* {
margin: 0;
}
on my page using npm run start
How you run code? Do you open a browser?
no just run npm start
i try to run just css but either and with styled-components run perfectly
check your extensions, document
is available in any browser, I can't reproduce
In my environment it worked commenting the style loader and the sass loader (that is, working only with css)
//...same config
{
test: /\.(sc|sa|c)ss/i,
use: [
MiniCssExtractPlugin.loader,
// devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
// 'sass-loader',
'css-loader',
],
},
And with sass but again, just with style-loader
{
test: /\.(sc|sa|c)ss/i,
use: [
// MiniCssExtractPlugin.loader,
// devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
'sass-loader',
'style-loader',
'css-loader',
],
},
Again, sass-loader
should be after css-loader
, please use:
devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader',
if you want to always extract remove style-loader
|
Again,
sass-loader
should be aftercss-loader
, please use:devMode ? 'style-loader' : MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader',
if you want to always extract remove
style-loader
You are absolutely right, sorry for my stupidity :)
Bug report
Actual Behavior
I have a template of webpack for my projects maded with react and in the past worked perfectly, but now cant compile a single sass file, i really dont now what i'm dong wrong
Expected Behavior
Compile without errors because the sass file that i try to compile is empty
How Do We Reproduce?
I have a repo with the actual issue, you just should clone and run
npm start
Please paste the results of
npx webpack-cli info
here, and mention other relevant information