Error importing Sass module into Angular

Asked

Viewed 308 times

-2

I want to use MDC Image List but when importing in style . scss from some Angular module
@use "@material/image-list/mdc-image-list"; does not compile with following error:

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.

@use "@material/feature-targeting/functions" as feature-targeting-functions;

How can I fix it? I use version 9 Ivy

EDIT: I did npm install as on the MDC page, but for some angular reason it blocked the style and Sass cannot import..

angular sass scss

  • Performed the npm install?

  • 1

    Yes as in the link I quoted, the error was about the angular, not directly from Sass..

1 answer

0


Searching the github I found a Issue solved, apparently the webpack of Sass Loader is importing the files _index.scss of mdc as index.js and there are 2 solutions for now:

Set the path node_modules globally for the Oader on angular.json:

"stylePreprocessorOptions": {
  "includePaths": [
    "node_modules"
  ]
},
"styles": [
  "src/styles.css",
  // pode importar o módulo aqui ou no component
],

Or cancel the option webpackImporter in the sass-loader:

module.exports = {
  mode: 'development',
  entry: './fixture-import.scss',
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          'css-loader',
          {
            loader: 'sass-loader',
              options: {
+               webpackImporter: false,
                sassOptions: {
                  includePaths: ['node_modules'],
                },
                implementation: require('dart-sass'),
            },
          },
        ],
      },
    ],
  },
};

Browser other questions tagged angular sass scss

You are not signed in. Login or sign up in order to post.