typescript 角材料：SassError：“@include mat”后的CSS无效：应为1个选择器或at-rule，为“.core();”

tv6aics1 于 2023-04-07 发布在 TypeScript

关注(0)|答案(6)|浏览(131)

我有一个angular 11项目，使用angular material（也是11）工作了一段时间。我刚刚将所有内容更新到angular 12（包括material）。包含在material中的styles.scss在更新后失败了。整个错误是：

./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();

   ---------^

失败的代码是：

@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);

我已经搜索了他们的问题队列，似乎找不到任何东西。我看到了一些运行npm rebuild node-sass的建议。那不起作用。我也做了一个npm install node-sass，那也不起作用。有什么想法吗？

typescript

来源：https://stackoverflow.com/questions/67527236/angular-material-sasserror-invalid-css-after-include-mat-expected-1-select

6条答案

按热度按时间

wgxvkvu91#

我通过删除节点sass一起修复了它。
npm uninstall node-sass

赞(0）回复(0）举报 2023-04-07

j13ufse22#

node-sass在2021年被弃用。我遇到了与问题和答案中相同的问题：https://stackoverflow.com/a/68327656/12532248帮助我

赞(0）回复(0）举报 2023-04-07

vhmi4jdf3#

我通过安装npm sass解决了这个问题（这可能不是必需的）。
我还不得不把下面的代码从我的**/styles/_theme.scss中移出来，直接放到我的styles.scss中。似乎在部分scss文件（以_开头的文件）中的@include mat.core（）**有问题。

@use '~@angular/material' as mat;
@import '~@angular/material/theming';
@include mat.core();

$app-primary: mat.define-palette(mat.$indigo-palette);
$app-accent: mat.define-palette(mat.$indigo-palette);

$app-warn: mat.define-palette(mat.$red-palette, 900);

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

@include mat.all-component-themes($app-theme);

$sansserif-typography: mat.define-typography-config(
  $font-family: sans-serif
);
@include mat.all-component-typographies($sansserif-typography);

赞(0）回复(0）举报 2023-04-07

bxgwgixi4#

首先卸载node-sass，如其他答案中所述。
npm uninstall node-sass
你不需要单独安装sass，这应该已经在材料内部使用了。
第二，这看起来可能无关紧要，但它对我有用。.browserslistrc文件需要使用新格式。在Angular 12中，默认情况下应该是：

# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
# For additional information regarding the format and rule options, please see:
# https://github.com/browserslist/browserslist#queries

# For the full list of supported browsers by the Angular framework, please see:
# https://angular.io/guide/browser-support

# You can see what browsers were selected by your queries by running:
#   npx browserslist

last 1 Chrome version
last 1 Firefox version
last 2 Edge major versions
last 2 Safari major versions
last 2 iOS major versions
Firefox ESR
not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.

旧格式不知何故导致node-sass仍然被使用，因此@use语句最终失败。
旧格式对我来说看起来像这样：

这里讨论：https://github.com/angular/angular-cli/issues/20967
最后，确保@use语句放在任何@import语句之前（在文件的顶部）。

赞(0）回复(0）举报 2023-04-07

axzmvihb5#

在经历了很多解决方案之后，这是对我有效的：
1.卸载node-sass：npm uninstall node-sass
1.删除 node-modules 文件夹和 * package-lock.json * 文件
1.安装sass：npm安装--保存设备sass

npm install
npm启动

赞(0）回复(0）举报 2023-04-07

8e2ybdfx6#

如果你的package.json和package-lock.json上没有node-sass，你仍然看到这个错误，或者在构建中你看到node-sass被弃用的警告：检查您的项目父文件夹是否包含node_modules文件夹和node-sass。
这是我的情况，所以我删除了node_modules，因为在我的情况下，父文件夹不需要该文件夹，或者从父文件夹npm项目中删除node-sass，这取决于你需要什么。

赞(0）回复(0）举报 2023-04-07

我来回答

typescript 角材料：SassError：“@include mat”后的CSS无效：应为1个选择器或at-rule，为“.core();”

6条答案

相关问题

热门标签

最新问答