Version 3.1.0+ breaks SASS modules composition
See original GitHub issueDescribe the bug
In 3.1.0 the resolve-url-loader
lib was added that breaks SASS modules composition. Either removing the lib from the webpack config or downgrading to 3.0.1 fixes the issue.
Did you try recovering your dependencies?
Yes. Deleted node-modules
and removed the package-lock.json
.
Environment
Environment Info:
System:
OS: macOS 10.14.6
CPU: (8) x64 Intel(R) Core(TM) i7-6820HQ CPU @ 2.70GHz
Binaries:
Node: 12.6.0 - /usr/local/bin/node
Yarn: 1.17.3 - /usr/local/bin/yarn
npm: 6.10.1 - /usr/local/bin/npm
Browsers:
Chrome: 77.0.3865.75
Firefox: 66.0.3
Safari: 12.1.2
npmPackages:
react: ^16.9.0 => 16.9.0
react-dom: ^16.9.0 => 16.9.0
react-scripts: 3.1.1 => 3.1.1
npmGlobalPackages:
create-react-app: Not Found
Steps to reproduce
npx create-react-app test_app && cd test_app
yarn add node-sass
- Create
b.module.sass
with
.test
background: #FFF
- Create
a.module.sass
with
.test
composes: test from './b.module.sass`
- In
App.js
add as the first lineimport './a.module.sass'
yarn start
and observe the error
- Rename
b.module.sass
tob.module.css
and replace the contents with
.test {
background: #FFF;
}
- In
a.module.sass
changeb.module.sass
tob.module.css
- Observe that the error is gone
Expected behavior
Build succeeds.
Actual behavior
Build fails.
./src/b.module.sass (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-6-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--6-oneOf-6-3!./src/b.module.sass)
Error: resolve-url-loader: CSS error
./src/b.module.sass:2:3: Unknown word
You tried to parse Sass with the standard CSS parser; try again with the postcss-sass parser
You tried to parse Sass with the standard CSS parser; try again with the postcss-sass parser
Reproducible demo
Issue Analytics
- State:
- Created 4 years ago
- Reactions:13
- Comments:27 (2 by maintainers)
Top Results From Across the Web
postcss-modules-values | Yarn - Package Manager
PostCSS plugin for CSS Modules to pass arbitrary values between your module files. css, modules, postcss. readme. CSS Modules: Values.
Read more >Gatsby Changelog | 5.3.0
We are proposing Breaking Changes for the next major version of Gatsby to our GraphQL API. The goal of this change is increasing...
Read more >Sass: @use
The @use rule loads mixins, functions, and variables from other Sass stylesheets, and combines CSS from multiple stylesheets together.
Read more >resolve-url-loader - npm
Resolve URL Loader. NPM. This webpack loader allows you to have a distributed set SCSS files and assets co-located with those SCSS files....
Read more >error: node sass version 7.0.1 is incompatible with ^4.0.0.
node_modules /sass-loader/lib/loader.js): Error: Node Sass version 7.0.1 is incompatible with ... Don't forget to read the breaking changes for each release, ...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
I miss the times when the CRA team cared more about the stability of the package. Now they’ve added
resolve-url-loader
to cover some specific use-cases of the app building but broke the old ways. And the issue is here for 4 months already and nobody gives a damn. According to the author ofresolve-url-loader
the bug is in fact incss-loader
. But the corresponding github issue incss-loader
was closed so I guess it won’t be fixed. The obvious fix for CRA should’ve been to just dropresolve-url-loader
until it’s fixed. Or at least make it optional and disabled by default.Does somebody have had the same issue with url images. I have. a message like ’ Module not found: Can’t resolve <wrong image path> in <react src>'.