"File to import not found or unreadable" When @import scss file from node_modules

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): react-scripts@1.0.10

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.

[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