SCSS imports fail

[mpw-wwu]

I had a working webpack setup for my project.

But out of a sudden, the loader can't import any of the following modules:

@import "@material/list/mdc-list";
@import "@material/top-app-bar/mdc-top-app-bar";
@import "@material/typography/mdc-typography";
@import "@material/dialog/mdc-dialog";
@import "@material/button/mdc-button";
@import "@material/textfield/mdc-text-field";
@import "@material/menu/mdc-menu";

(others like mdc-ard, mdc-icon-button or mdc-menu-surface work perfectly.)

Bug report

Steps to reproduce

1. Import modules in your scss
2. run node_modules/.bin/webpack-dev-server
3. See error

Actual behavior

ERROR in [removed]
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "...eting-functions": expected expression (e.g. 1px, bold), was ".all()) {"
        on line 31 of node_modules/@material/typography/_mixins.scss
        from line 28 of node_modules/@material/list/_mixins.scss
        from line 21 of node_modules/@material/list/mdc-list.scss
[...]
>> styles($query: feature-targeting-functions.all()) {

   ------------------------------------------^

Expected behavior

Correct import as usual.

Probably a sub-module has been updated somewhere and caused this issue in so many modules at the same time. Any idea for a workaround?

hint

I think things might have started when I installed the typography-module via npm. But uninstalling that module didn't undo the damage.

Best,
Matthias

[asyncLiz]

This is likely a combination of two issues:

The first is that when you installed typography, you may have installed the latest version while your previous @material/* dependencies were on an earlier version number (most likely pre v5).

Make sure all of your material dependencies are the same version. You can do this by specifying a version and using --save-exact with npm:

# assuming you're on v4
npm install @material/[email protected] --save-exact

Second, the error in question makes me think you're using node-sass, which doesn't support Sass modules. Since v5, all of our packages use Sass modules and require the sass package (dart sass implementation).

If you wish to upgrade past v4, you'll need to replace node-sass with sass:

npm rm node-sass
npm install sass

Keep in mind that there is a known issue when using sass and sass-loader with Sass modules and @import-ing Sass module packages. There is a workaround, but some have reported that it still doesn't work. The only sure way to avoid bugs is to switch from @import to @use when you upgrade.

tl;dr

If you're on v4 and don't need/want later versions and don't want to refactor your code, install the v4 version of typography and make sure all @material/* dependencies are v4.

If you want to upgrade past v4, upgrade all of your @material/* dependencies to the same version, switch to sass, and either use the workaround mentioned above or switch to @use instead of @import for @material/ Sass imports.

[mpw-wwu]

Thank you, @asyncLiz for this spot on explanation!

I updated all dependencies and switched to @use. Works.