迁移到 Angular 11自定义 webpack后 SCSS 编译中出现“TypeError: node.getIterator is not a function”

问题描述

在我的 Angular 项目中加载 scss 文件时发生错误。这个错误是在我从 Angular v9 迁移到 v11 之后首先出现的（我按照迁移指南操作，一切顺利）。

错误：

Error: ./src/styles.scss
Module build Failed (from ./node_modules/@angular-devkit/build-angular/node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build Failed (from ./node_modules/postcss-loader/dist/cjs.js):
TypeError: node.getIterator is not a function

每个 .scss 文件都会显示此错误，解析失败。

背景：

该项目正在使用 @angular-builders/custom-webpack webpack 构建器。我使用它是因为我们正在使用 Tailwind CSS。

Webpack 有一个 postCSS 的配置：

module.exports = {
    module: {
        rules: [
            {
                test: /\.scss$/,loader: 'postcss-loader',options: {
                    postcssOptions: {
                        ident: 'postcss',Syntax: 'postcss-scss',plugins: ['postcss-import','tailwindcss','autoprefixer'],},],};

angular.json 文件非常标准。

依赖项：

• 角度：^11

• @angular-builders/custom-webpack: ^11

• postcss：^8.2.6

• postcss 导入：^14.0.0

• postcss-loader: ^4.2.0

• postcss-scss：^2.1.1

• node: v15.8.0 - （我想知道这是否可能是一个问题，因为我在软件包上收到了一些警告。但是，我使用 nvm 降级了 node，并且在重新安装软件包后发生了同样的错误并再次运行。）

如果您能提供任何可能出错的提示，我们将不胜感激。

解决方法

经过一些研究，有两件事确实有帮助：

• 我开始使用 angular.json 中的默认 @angular-devkit 包。这意味着可以消除 webpack 增加的整个复杂性。一个很好的指南是：https://dev.to/angular/setup-tailwindcss-in-angular-the-easy-way-1i5l。 （如果发生此错误，这可能是您的解决方案）。

• 阅读 tailwindCSS 文档... https://tailwindcss.com/docs/upgrading-to-v2 表明某些类已重命名，而其他一些类获得了新值。

,

我遇到了完全相同的问题，我通过阅读 postcss-loader 的文档解决了它： https://www.npmjs.com/package/postcss-loader#extract-css

我不得不将 webpack.config.js 更改为以下内容。您可能想要适应您的情况。让我知道它是否有效！

const isProductionMode = process.env.NODE_ENV === "production";


module.exports = {
  mode: isProductionMode ? "production" : "development",module: {
    rules: [
      {
        test: /\.css$/,use: [
          isProductionMode ? MiniCssExtractPlugin.loader :
            "style-loader","css-loader",{
                loader: "postcss-loader",options: {
                    postcssOptions: {
                        ident: "postcss",syntax: "postcss-scss",plugins: [
                            require("postcss-import"),require("tailwindcss"),require("autoprefixer"),],},plugins: [
    new MiniCssExtractPlugin({
      filename: isProductionMode ? "[name].[contenthash].css" : "[name].css",}),};