0

在我的 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-webpackwebpack 构建器。我使用它是因为我们正在使用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

  • 邮政编码：^8.2.6

  • postcss 导入：^14.0.0

  • postcss 加载器：^4.2.0

  • postcss-scss：^2.1.1

  • 节点：v15.8.0 - （我想知道这是否是一个问题，因为我收到了一些关于软件包的警告。但是，我使用 nvm 降级了节点，并且在重新安装软件包并再次运行后出现了同样的错误。）

任何关于哪里可能出错的指示将不胜感激。

4

3 回答 3

1

我有完全相同的问题，我通过阅读 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",
    }),
  ],
};
于 2021-03-10T18:14:20.120 回答
1

经过一番研究，有两件事真正有帮助：

  • 我开始在 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显示某些类已重命名，而其他一些类则获得了新值。

于 2021-03-24T15:39:39.727 回答
1

我有这个问题。就我而言，我从另一个项目中复制了我的配置，忘记安装 postcss-scss 作为开发依赖项。postcss 没有给出关于缺少节点模块的错误，而是默默地失败并抱怨 node.getIterator

在研究这个问题时，我从 postcss 的作者那里读到，如果 postcss 创建的 AST 树被插件以某种方式破坏，您只会看到这个错误。发生这种情况的一种方法是，如果您的旧 postcss 插件是为 postcss 7 而不是最新的 postcss 8 设计的。另一种可能破坏 AST 树的方法是如果插件完全未定义，这就是我忘记安装 postcss 时发生的情况-scss

于 2021-08-17T16:46:43.580 回答