SassError: Can't find stylesheet to import

[mattdsteele]

Describe the bug
I'm not sure this is specifically an MDC Web bug, but I'm open to suggestions or workarounds.

Loading the styles for Chips does not appear to be usable, due to @material/chips using a @forward directive, which is not supported by the current Sass pulled in by the Angular toolkit.

To Reproduce
Steps to reproduce the behavior:

1. Generate a new Angular 9 project and include angular-mdc/web as per the Getting Started page
2. Include the modules and styles for Chips as outlined on this page. Namely:

@use '@material/chips/mdc-chips';
@use '@material/chips';

3. Run ng serve

It will produce this error:

ERROR in ./src/styles.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/dist/cjs.js??ref--15-3!./src/styles.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
4 │ @use "@material/chips";
  │ ^^^^^^^^^^^^^^^^^^^^^^
  ╵
  C:\Users\IGEN261\code\test\styletests\c\src\styles.scss 4:1  root stylesheet

What Angular MDC version are you using?

• Angular 9.0.2
• Angular MDC Web 5.0.4

What OS are you using?: Windows 10

What browser(s) is this bug affecting?: n/a

Additional context

I think what's happening is that while @material/chips/_index.scss exists, it's using a @forward directive to include its mixins and variables: https://github.com/material-components/material-components-web/blob/master/packages/mdc-chips/_index.scss

This was a new at-rule to me, but based on this documentation, I believe it's only available in a future version of dart-sass (1.24.0, while the Angular CLI loads 1.23.3).

I'm not sure how to resolve this. Are there any workarounds or other approaches you might recommend?

[mattdsteele]

Actually, based on this blog post, @forward is supported starting in sass 1.23.0, so it's even less clear why is failing to compile.

[trimox]

@mattdsteele I encountered same issue a couple weeks ago and commented under MDC repo for further investigation upstream. material-components/material-components-web#5546 (comment)

@abhiomkar filed an issue with sass-loader library which I'm following here

A couple workarounds are mentioned in the above links but if all else try temporarily resolving directly (e.g.: @material/chips/_index.scss). Chips example

Hope this helps..

Hi, what's the temporary fix?

I'm not too familiar with webpack so I'm not sure how to set webpackImporter: false like suggested here by @abhiomakar.

I also tried using the code from _chips.scss but I still can't get my components to display properly.

I think you can either use the absolute path, and restart ng serve.
Or as mentioned here:
https://trimox.github.io/angular-mdc-web/#/angular-mdc-web/getting-started
to include:
"styles": [
"src/styles.scss"
],
"stylePreprocessorOptions": {
"includePaths": [
"node_modules/"
]
}
in angular.json

@dazza91 thanks, I already have those lines in my my angular.json.

This is what I have in my stylesheet:

@use '@material/theme' with (
  $primary: #6200ee,
  $secondary: #faab1a,
  $background: #fff,
);

// MDC Typography
@use '@material/typography/mdc-typography';

@use '@material/checkbox/mdc-checkbox.scss';
@use '@material/checkbox/_index.scss';

// Angular MDC
@use '@angular-mdc/theme/material';

The code now compiles successfully but the checkbox does not seem to be styled properly like in the example.
There is no hover effect and the checkmark stays black instead of white.

I installed

npm i -D @angular-builders/custom-webpack
npm install sass-loader

and I changed my angular.json to

      "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./extra-webpack.config.js",
              "mergeStrategies": {
                "externals": "replace"
              }
            },

I also created a extra-webpack.config.js like this:

module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          {
            loader: 'sass-loader',
            options: {
              webpackImporter: false,
              sassOptions: {
                includePaths: ['node_modules'],
              },
            },
          },
        ],
      },
    ],
  },
};

but I don't think I have it set up properly. If anybody has any tips, please let me know.

Sorry I don't know what to suggest. Usually when you create a new angular project you specify the
ng new my-sassy-app --style=scss. This is as far as I know to tell angular to use sass out of the box. Good luck

Is there a way to import the whole deal, not just single components, via @import maybe?

Maybe it might be something to look into for testing at least. I'm sure there's a list of all the modules we could copy and paste?? ...