mini-css-extract-plugin icon indicating copy to clipboard operation
mini-css-extract-plugin copied to clipboard

Module-level aliases don't work

Open GottemHams opened this issue 9 months ago • 3 comments

Bug report

Actual Behavior

Although this loader does support resolve.alias at the top level of the Webpack config, it seems module-specific aliases are ignored (module.rules[i].resolve.alias). This results in Can't find stylesheet to import errors, which occurs for both @use and @import. One reason for module-level aliases is so that every rule can have its own aliases, without any risk of accidentally importing SASS into TypeScript for example (or vice versa even).

ERROR in ./sass/entry.scss (./sass/entry.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./sass/entry.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Can't find stylesheet to import.
  ╷
1 │ @import '@aliased/import';
  │         ^^^^^^^^^^^^^^^^^
  ╵
  sass/entry.scss 1:9  root stylesheet
 @ ./sass/entry.scss

This error seems to originate from sass-loader if I'm interpreting this correctly, which is why I created the issue here and not elsewhere.

Expected Behavior

Perhaps there is a way to just ask Webpack what aliases are relevant for the current loader/rule? That way it will keep working even if they ever add aliases at more levels.

How Do We Reproduce?

  1. Clone the reproduction repo
  2. Run npm i of course
  3. Now you can do either npm run build-fail or npm run build-good

I only used @import in this example because it's closer to my actual scenario (can't use @use due to dependencies), and I figured it's pretty redundant to show @use since the behaviour is exactly the same anyway.

Please paste the results of npx webpack-cli info here, and mention other relevant information

  System:
    OS: macOS 14.4.1
    CPU: (12) arm64 Apple M2 Pro
    Memory: 116.09 MB / 16.00 GB
  Binaries:
    Node: 23.6.1 - /opt/homebrew/bin/node
    Yarn: 1.22.22 - /opt/homebrew/bin/yarn
    npm: 10.9.2 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 133.0.6943.53
    Safari: 17.4.1
  Packages:
    css-loader: ^7.1.2 => 7.1.2 
    sass-loader: ^16.0.4 => 16.0.4 
    webpack: ^5.97.1 => 5.97.1 
    webpack-cli: ^6.0.1 => 6.0.1 

GottemHams avatar Feb 06 '25 21:02 GottemHams