Can't resolve stylesheet with @import rule in SASS file using webpack/sass-loader

[karlshea]

Follow-up to #2516.

Just started to use this package to migrate off of react-datetime, and it's the only package having stylesheet resolution issues.

I'm using 9.1.4 and getting this:

Error: Package path ./style.css is not exported from package /[project path]/node_modules/react-day-picker (see exports field in /[project path]/node_modules/react-day-picker/package.json).

See example here: https://stackblitz.com/edit/webpack-webpack-js-org-3gydhk?file=src%2Fapp.scss

I've tried @import "react-day-picker/style.css";, @import "react-day-picker/style.module.css";, and @import "react-day-picker/dist/style.css";. In 9.1.3 I was able to get around this with @use "../../../node_modules/react-day-picker/src/style.css"; to ignore module resolution entirely.

All of the other packages I'm using where the imports work just fine have entries in their package.json that look a little different, e.g yet-another-react-lightbox:

  "exports": {
    "./styles.css": {
      "types": "./dist/styles.css.d.ts",
      "default": "./dist/styles.css"
    }
  }

It's something to do with the import/require entries for the stylesheets.

If I make this package's exports look like this then @import "react-day-picker/style.css"; works:

    "./style.css": {
      "types": "./style.css.d.ts",
      "default": "./style.css"
    },

In #2533 mentioned in the release notes there's a link for testing resolution, and there are still a bunch of resolution failed messages for the new version: https://arethetypeswrong.github.io/?p=react-day-picker%409.1.4

[gpbl]

@karlshea Thanks for sharing your stack!

It looks like you're trying to import react-day-picker/style.css from a .scss file. These imports are handled by sass-loader, and I'm unsure how Sass resolves them based on package.json.

Instead of importing the style from a Sass file, I suggest importing it directly in your index.js:

import './app.scss';
+ import 'react-day-picker/style.css';

Additionally, update your CSS loader in webpack.config.js to handle both .css and .scss files:

-		test: /\.(scss)$/,
+       test: /\.(s?css)$/,

In #2533 mentioned in the release notes there's a link for testing resolution, and there are still a bunch of resolution failed messages for the new version: arethetypeswrong.github.io?p=react-day-picker%409.1.4

Keep in mind, this tool tests TypeScript types, but it does not verify @import statements in Sass.

[karlshea]

We unfortunately can't import directly from JS, this is an old project and needs to build extracted CSS.

sass-loader says it uses webpack's module resolution, which is why I'm stumped about it not finding the file. I'm not sure what other bundlers are doing when the package exports have import/require for each CSS file, but this is the only project I'm using that does it that way?

[gpbl]

I’m not sure why it breaks—maybe Sass doesn’t like the "exports" in package.json?

• Try tweaking files in node_modules/react-day-picker to find a Sass-friendly configuration.
  • Could it be related to the files setting?
• Remember, we include that source in /src/style.css—it’s pretty standard. You could try copying it out and importing it directly from the app source.

Sometimes, using the ~ symbol helped resolve this.

@import "~react-day-picker/src/style.css`

...but I'm glad I don't have to wrestle with Sass anymore. Let me know how it goes — I’d be happy to review a PR for this!

[karlshea]

~ doesn't make a difference.

If I switch the exports in package.json to this it all works (remove nested import/require):

"./style.css": {
  "types": "./style.css.d.ts",
  "default": "./style.css"
},

I'm not sure if that would break other bundlers?

[karlshea]

PR: #2547

Let's see what the test runner does.