角度材料:SassError:“@include mat"之后的 CSS 无效:预期为 1 选择器或规则，为“.core();"

问题描述

我有一个 angular 11 项目使用 angular 材料(也是 11)工作了一段时间.我刚刚将所有内容更新为 angular 12(包括材料).材料中包含的 style.scss 现在在更新后失败.整个错误是:

./src/styles.scss - 错误:模块构建失败(来自 ./node_modules/mini-css-extract-plugin/dist/loader.js):ModuleBuildError:模块构建失败(来自 ./node_modules/sass-loader/dist/cjs.js):SassError:@include mat"之后的 CSS 无效:预期为 1 选择器或规则，为.core();"在 src/styles.scss 的第 11 行>>@include mat.core();---------^在 processResult (/Users/ronnieswietek/Sites/elysian-finder/modules/custom/elysian_finder/finder/node_modules/webpack/lib/NormalModule.js:676:19)在/Users/ronnieswietek/Sites/elysian-finder/modules/custom/elysian_finder/finder/node_modules/webpack/lib/NormalModule.js:778:5在/Users/ronnieswietek/Sites/elysian-finder/modules/custom/elysian_finder/finder/node_modules/loader-runner/lib/LoaderRunner.js:399:11在/Users/ronnieswietek/Sites/elysian-finder/modules/custom/elysian_finder/finder/node_modules/loader-runner/lib/LoaderRunner.js:251:18在 context.callback (/Users/ronnieswietek/Sites/elysian-finder/modules/custom/elysian_finder/finder/node_modules/loader-runner/lib/LoaderRunner.js:124:13)在 Object.callback (/Users/ronnieswietek/Sites/elysian-finder/modules/custom/elysian_finder/finder/node_modules/sass-loader/dist/index.js:54:7)在 Object.done [作为回调] (/Users/ronnieswietek/Sites/elysian-finder/modules/custom/elysian_finder/finder/node_modules/neo-async/async.js:8069:18)在 options.error (/Users/ronnieswietek/Sites/elysian-finder/modules/custom/elysian_finder/finder/node_modules/node-sass/lib/index.js:293:32)./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[1].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[5].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[5].rules[1].use[1]！./src/styles.scss - 错误:模块构建失败(来自 ./node_modules/sass-loader/dist/cjs.js):SassError:@include mat"之后的 CSS 无效:预期为 1 选择器或规则，为.core();"在 src/styles.scss 的第 11 行>>@include mat.core();---------^

出现问题的代码是:

@import '~@angular/material/theming';@use '~@angular/material' 作为垫子；@include mat.core();//<--- 这是失败的地方.$finder-primary: mat.define-palette(mat.$indigo-palette);$finder-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);$finder-warn: mat.define-palette(mat.$red-palette);$finder-theme: mat.define-light-theme((颜色: (主要:$finder-primary，口音:$finder-accent，警告:$finder-warn，)));//包括应用程序中使用的核心和每个组件的主题样式.//或者，您可以导入并@include 每个组件的主题混合//你正在使用的.@include mat.all-component-themes($finder-theme);

我搜索了他们的问题队列，但似乎找不到任何东西.我看到了一些运行 npm rebuild node-sass 的建议.那没有用.我还做了一个 npm install node-sass 并且没有用.有什么想法吗?

解决方案

我通过一起删除 node sass 来修复它.

npm 卸载 node-sass

I had an angular 11 project working for a while with angular material (also 11). I just updated everything to angular 12 (including material). The styles.scss that is included with material is now failing after the update. The entire error is:

./src/styles.scss - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "@include mat": expected 1 selector or at-rule, was ".core();"
        on line 11 of src/styles.scss
>> @include mat.core();

   ---------^

    at processResult (/Users/ronnieswietek/Sites/elysian-finder/modules/custom/elysian_finder/finder/node_modules/webpack/lib/NormalModule.js:676:19)
    at /Users/ronnieswietek/Sites/elysian-finder/modules/custom/elysian_finder/finder/node_modules/webpack/lib/NormalModule.js:778:5
    at /Users/ronnieswietek/Sites/elysian-finder/modules/custom/elysian_finder/finder/node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at /Users/ronnieswietek/Sites/elysian-finder/modules/custom/elysian_finder/finder/node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at context.callback (/Users/ronnieswietek/Sites/elysian-finder/modules/custom/elysian_finder/finder/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at Object.callback (/Users/ronnieswietek/Sites/elysian-finder/modules/custom/elysian_finder/finder/node_modules/sass-loader/dist/index.js:54:7)
    at Object.done [as callback] (/Users/ronnieswietek/Sites/elysian-finder/modules/custom/elysian_finder/finder/node_modules/neo-async/async.js:8069:18)
    at options.error (/Users/ronnieswietek/Sites/elysian-finder/modules/custom/elysian_finder/finder/node_modules/node-sass/lib/index.js:293:32)

./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[1].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[5].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[5].rules[1].use[1]!./src/styles.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "@include mat": expected 1 selector or at-rule, was ".core();"
        on line 11 of src/styles.scss
>> @include mat.core();

   ---------^

The code in question that is failing is:

@import '~@angular/material/theming';
@use '~@angular/material' as mat;

@include mat.core(); // <--- Here is where it is failing.

$finder-primary: mat.define-palette(mat.$indigo-palette);
$finder-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
$finder-warn: mat.define-palette(mat.$red-palette);

$finder-theme: mat.define-light-theme((
  color: (
    primary: $finder-primary,
    accent: $finder-accent,
    warn: $finder-warn,
  )
));

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include mat.all-component-themes($finder-theme);

I've searched their issue queue and cant seem to find anything. I saw a couple suggestions to run npm rebuild node-sass. That didn't work. I also did an npm install node-sass and that didn't work. Any ideas?

解决方案

I fixed it by removing node sass all together.

npm uninstall node-sass

这篇关于角度材料:SassError:“@include mat"之后的 CSS 无效:预期为 1 选择器或规则，为“.core();"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！