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"),
}),

[davegonzalez]

@davidungio I also ran into this today. What worked for me was to prefix the the import with node_modules. so in my case, I had to do:

@import "node_modules/@vhx/adventurine";

rather than

@import "@vhx/adventurine";

[egoist]

Does @import "react-input-range/src/scss/index.scss"; work in regular node-sass? From what I can tell it's importing a file relative to cwd instead of the one in node_modules.

However I think you can use includePaths option to make this work:

postcss({
	use: [
		['sass', {
			includePaths: [path.resolve('node_modules')]
		}]
	]
})

[egoist]

btw in v1.3.0 you can prepend it with ~ to import from node_modules, see: https://github.com/egoist/rollup-plugin-postcss#imports

[u3u]

I also encountered this problem. I used bili to configure includePaths

// bili.config.js
const path = require('path');

module.exports = {
  postcss: {
    use: [
      [
        'sass',
        {
          includePaths: [path.resolve('node_modules')],
        },
      ],
    ],
  },
};

but this error occurred:

$ bili

🚨(postcss) /xxx/xxx.scss:1:0: Unknown word
You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser

🤔Is my configuration wrong?

[drewlustro]

This is working for me!

postcss({
  modules: true,
  extensions: ['.css', '.sass', '.scss'],
  namedExports: true,
  use: [
    [
      'sass', {
        includePaths: [path.join(__dirname, 'scss')]
      }
    ]
  ]
})