Create-react-app: "File to import not found or unreadable" When @import scss file from node_modules

[vynogradskyi]

Not sure if it is an actual bug or my curly hands, but i tried to provide as more details as possible to help solve this problem.

Is this a bug report?

Yes

Can you also reproduce the problem with npm 4.x?

Yes

Environment

1. node -v: 6.9.5
2. npm -v:4.6.1
3. npm ls react-scripts (if you haven’t ejected): [email protected]

Then, specify:

1. Operating system: Windows 10

Steps to Reproduce

(Write your steps here:)

1. create-react-app test && cd test
2. Make changes according to scss section
3. npm install react-select (actually any module with scss files should reproduce)
4. add @import "~react-select\scss\default.scss && npm start
5. see build error: { "status": 1, "file": "{my local path here}/test/src/App.scss", "line": 1, "column": 1, "message": "File to import not found or unreadable: ~react-select/scss/default.\nParent style sheet: {my local path here}//test/src/App.scss", "formatted": "Error: File to import not found or unreadable: ~react-select/scss/default.\n Parent style sheet: {my local path here}/test/src/App.scss\n on line 1 of src/App.scss\n>> @import \"~react-select/scss/default\";\ n ^\n" }

Expected Behavior

Just normal scss compile, coz it OK works for files not from node modules. BTW importing css works fine from node_modules

Actual Behavior

{ "status": 1, "file": "{my local path here}/test/src/App.scss", "line": 1, "column": 1, "message": "File to import not found or unreadable: ~react-select/scss/default.\nParent style sheet: {my local path here}//test/src/App.scss", "formatted": "Error: File to import not found or unreadable: ~react-select/scss/default.\n Parent style sheet: {my local path here}/test/src/App.scss\n on line 1 of src/App.scss\n>> @import \"~react-select/scss/default\";\ n ^\n" }

Reproducible Demo

https://github.com/vynogradskyi/cra_bug

[gaearon]

Is it a bug though? The ~ notation is webpack-specific. If I understand correctly, when Sass is precompiled by its own CLI, it processes @imports by itself, and thus doesn’t understand ~ notation. I think if you replaced this with node_modules/ instead it might work.

[vynogradskyi]

@gaearon Thank you a lot! this is definitely a bug, but in my head!

[FDMatthias]

Thanks @gaearon!

For people coming from google and for future reference, I had to change @import "sass-mq/mq" to @import "node_modules/sass-mq/mq" to fix the import of sass-mq.

[bochen2014]

in your webpack.config.js file, add

 { 
     module:{
            rules: [
                { test : /\.scss$/,
                  uese: {
                        loader: 'sass-loader',
                       options: {
                           includePaths: [
                                 path.resolve('../node_modules'), // @import('jeet/scss/jeet/index')
                   ...
               ]
             }
}

so that you don't have to put node_modules in your code

[franciscop-invast]

This worked for me locally, but when deploying through Jenkins I had the same problem again. This fixed it though:

// src/index.scss
@import 'variables';
@import '../node_modules/picnic/src/themes/default/colors';
@import '../node_modules/picnic/src/themes/default/theme';
@import '../node_modules/picnic/src/plugins/normalize/plugin';
@import '../node_modules/picnic/src/plugins/grid/plugin';
// ...

Adding the ../ in the beginning, since it is a relative path and node_modules are not inside src. I have no idea why it works without the ../ in local dev though.

[trusktr]

Worth noting that this node_modules prefix trick also works with Next.js.

[The-Code-Monkey]

I have this issue but its with my variables.scss from the root of my project rather than node modules

[KrunalDatascience]

I have this issue but its with my variables.scss from the root of my project rather than node modules

How did you resolve it??

[arkadyt]

@The-Code-Monkey did you resolve it?