Description
Describe the bug
When using CSS modules, if you compose a class from a .module.scss file, the dependency (that is, the module you import to compose from) does not have its scss transformed correctly. While the compose will work correctly, and SCSS is not preprocessed away down to recular css.
Did you try recovering your dependencies?
Yes. This is on a newly created test reproduction project.
$ yarn --version
1.17.3
Which terms did you search for in User Guide?
CSS Modules, SCSS, Sass, CSS
Environment
$ npx create-react-app --info
npx: installed 91 in 12.837s
Environment Info:
System:
OS: macOS 10.14.6
CPU: (4) x64 Intel(R) Core(TM) i7-6567U CPU @ 3.30GHz
Binaries:
Node: 12.13.0 - /usr/local/bin/node
Yarn: 1.17.3 - /usr/local/bin/yarn
npm: 6.12.0 - /usr/local/bin/npm
Browsers:
Chrome: 78.0.3904.87
Firefox: 67.0.4
Safari: Not Found
npmPackages:
react: ^16.11.0 => 16.11.0
react-dom: ^16.11.0 => 16.11.0
react-scripts: 3.2.0 => 3.2.0
npmGlobalPackages:
create-react-app: Not Found
Steps to reproduce
(Write your steps here:)
npx create-react appyarn add node-sass- Create
common.module.scssand write a class with some scss in it. - Create App.module.scss and write some scss in it, with an element that composes the class from
common.module.scss - Import the class from
App.module.scssand apply it to an element yarn start
Expected behavior
common.module.scss will have its styles in the <head> of the page, and the scss variables would be preprocessed out to regular css.
The element will have the correct styles applied to it from common.module.scss.
It should look like this:
Actual behavior
common.module.scss will have its styles in the <head> of the page, but the scss language features (such as variables) will still be present.
The element will have the correct styles applied to it from common.module.scss.
It looks like this:
Reproducible demo
https://github.com/joshhunt/create-react-app-repro
Clone it, yarn install, yarn start. The box should be pink, but it is not.