Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

This module breaks SASS modules composition in CRA #131

Closed
igor10k opened this issue Sep 8, 2019 · 6 comments
Closed

This module breaks SASS modules composition in CRA #131

igor10k opened this issue Sep 8, 2019 · 6 comments
Labels
framework 😱 consumer is a build framework upstream loader problem problem with some loader upstream from resolve-url-loader

Comments

@igor10k
Copy link

igor10k commented Sep 8, 2019

Updated my CRA to the latest version and the build started failing. A little debugging showed that removing the resolve-url-loader fixes the issue.

The error is thrown when trying to use the CSS modules composition feature with a css preprocessor. Composing from a SASS module doesn't work. Composing from a CSS module works.

Thrown error

./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

Steps to reproduce

  1. npx create-react-app test_app && cd test_app
  2. yarn add node-sass
  3. Create b.module.sass with
.test
  background: #FFF
  1. Create a.module.sass with
.test
  composes: test from './b.module.sass`
  1. In App.js add as the first line import './a.module.sass'
  2. yarn start and observe the error

  1. Rename b.module.sass to b.module.css and replace the contents with
.test {
  background: #FFF;
}
  1. In a.module.sass change b.module.sass to b.module.css
  2. Observe that the error is gone
@igor10k igor10k changed the title SASS syntax not supported? This module breaks SASS modules composition in CRA Sep 14, 2019
@igor10k
Copy link
Author

igor10k commented Sep 14, 2019

Debugged a bit more and found what exactly is breaking the build. So edited the issue to reflect that.

@bholloway
Copy link
Owner

bholloway commented Sep 18, 2019

It seems this is a css-loader issue per webpack-contrib/css-loader#131.

The same issue has been opened on a number of loaders. It would be consistent with those cases to close this issue here. However I suspect that would just lead to people creating more issues so I will leave open for now.

@bholloway bholloway added the upstream loader problem problem with some loader upstream from resolve-url-loader label Sep 18, 2019
@mxshahan
Copy link

Error: resolve-url-loader: CSS error
source-map information is not available at url() declaration (found orphan CR, try removeCR option)

error Command failed with exit code 1.

I'm getting this error when I try to build my project using react-scripts

@bholloway bholloway added the framework 😱 consumer is a build framework label Jul 29, 2020
@bholloway
Copy link
Owner

@shahan953 that error is not relevant to this issue. Please follow the docs.

@bholloway
Copy link
Owner

@igor10k is this still an issue in CRA? Everything I read points to this being fixed.

@bholloway
Copy link
Owner

In the mean time I'm going to close this issue. Please let me know if it is still a problem and we can reopen.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
framework 😱 consumer is a build framework upstream loader problem problem with some loader upstream from resolve-url-loader
Projects
None yet
Development

No branches or pull requests

3 participants