node_modules resolve not working with @import for SCSS

[davidungio]

I'm running into this error msg when I'm trying to @import a .scss file from my node_modules folder via this method:

@import "react-input-range/src/scss/index.scss";

Results in this error:

[!] (postcss plugin) Error: File to import not found or unreadable: react-input-range/src/scss/index.scss.

However, if I include the entire relative path to the .scss, that'll work:

@import "../../../../../../node_modules/react-input-range/src/scss/index.scss";

and this works as well

@import "react-input-range/lib/css/index.css";

I need to import the .scss to override the SASS variables, so can't make use of of the .css file. I can't seem to figure out the cause and need some assistance with my issue, thanks!

---

So to reiterate:

Component.scss

// Works
@import "react-input-range/lib/css/index.css"; 
@import "../../../../../../node_modules/react-input-range/src/scss/index.scss";

// Does not work
@import "react-input-range/src/scss/index.scss";

rollup.config.js

import easyImport from "postcss-easy-import";
import postcssFlexbugsFixes from 'postcss-flexbugs-fixes';
import autoprefixer from "autoprefixer";

postcss({
    sourceMap: true,
    minimize: true,
    modules: true,
    namedExports: true,
    plugins: [
        easyImport,
        postcssFlexbugsFixes,
        autoprefixer({
            browsers: [
                '>1%',
                'last 4 versions',
                'Firefox ESR',
                'not ie < 9', // React doesn't support IE8 anyway
            ],
            flexbox: 'no-2009',
        }),
    ],
    extract: path.resolve("./dist/style.css"),
}),

[vedtam]

@davidungio I ran into the same issue:

Error: File to import not found or unreadable: @material/animation/functions.

But as I can see, there's been no solution, or?

[davidungio]

Hey @vedtam We ended up just importing the full relative path. It's ugly, but it worked.

@import "../../../../../../node_modules/react-input-range/src/scss/index.scss";

[jpblancoder]

@davidungio Did you try this?

easyImport({ extensions: [".css", ".scss"] })

[cwahlfeldt]

@jpblancoder just tried that and it didnt work

[ctrlplusb]

I'm having the same issue, just to reiterate on @cwahlfeldt's response - adding the extensions configuration does not appear to resolve this issue.