Open nicholaschiang opened 4 years ago
Problem here has to do with the way that sass-loader
resolves import
s:
Webpack provides an advanced mechanism to resolve files.
The sass-loader uses Sass's custom importer feature to pass all queries to the Webpack resolving engine. Thus you can import your Sass modules from node_modules. Just prepend them with a ~ to tell Webpack that this is not a relative import:
Webpack will then resolve import
s using the main
fields within the directories package.json
file (which usually does not point to the _index.scss
file we want to import):
If the path points to a folder, then the following steps are taken to find the right file with the right extension:
- If the folder contains a package.json file, then fields specified in resolve.mainFields configuration option are looked up in order, and the first such field in package.json determines the file path.
- If there is no package.json or if the resolve.mainFields do not return a valid path, file names specified in the resolve.mainFiles configuration option are looked for in order, to see if a matching filename exists in the imported/required directory.
- The file extension is then resolved in a similar way using the resolve.extensions option.
We need to resolve SCSS import
s from the node_modules
to grab _index.scss
files automatically.
On a related note, I'm adding some SCSS @use
statements to src/site/packages/error-msg/index.scss
and it can't seem to be able to resolve the module imports to the modules in src/site/packages/error-msg/node_modulex
automatically:
ERROR in ./packages/error-msg/index.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ref--4-2!./packages/error-msg/index.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
╷
25 │ @use "@material/animation/functions" as functions2;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
packages/error-msg/node_modules/@material/ripple/_mixins.scss 25:1 @use
packages/error-msg/node_modules/@material/ripple/mdc-ripple.scss 23:1 @use
/home/nchiang/repos/tutorbook/src/site/packages/error-msg/index.scss 2:1 root stylesheet
@ ./packages/error-msg/index.scss 2:21-141
@ ./packages/error-msg/index.js
@ ./packages/site/index.js
Current workaround is to just add that absolute path (of src/site/packages/error-msg/node_modules
to the sass-loader
sassOptions
includePaths
field in our root src/site/webpack.config.js
similar to what we're doing in src/app/webpack.config.js
).
https://github.com/material-components/material-components-web/issues/351 I tried everything in that issue and nothing works ^.
fix: debug Sass import file abbreviations
This works (in
src/app/packages/app/styles/login.scss
):But this doesn't (same file):
Current workaround:
This has something to do with the way that
sass-loader
andwebpack
are resolving modules because it should work.