"TypeError: node.getIterator不是一个函数“在SCSS编译后迁移到角11 (自定义webpack)
"TypeError: node.getIterator不是一个函数“在SCSS编译后迁移到角11 (自定义webpack)
提问于 2021-02-18 08:04:29
在我的角度项目中加载scss文件时发生了一个错误.这个错误首先出现在我从角度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的建设者。我之所以使用它，是因为我们使用的是尾风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-import：^14.0.0
- postcss-loader：^4.2.0
- postcss-scss：^2.1.1
- 节点: v15.8.0 -(我想知道这是否是一个问题，因为我在包上收到了一些警告。但是，我用nvm降低了节点的级别，在重新安装包并再次运行它之后也发生了同样的错误。)
。
任何指示，看看哪里可能出错，将是非常感谢的。
回答 3
Stack Overflow用户
回答已采纳
发布于 2021-03-24 15:39:39
经过一些研究之后，有两件事真正起了作用：
- I使用angular.json中默认的@angular包启动。这意味着webpack所增加的全部复杂性可以消除。一个很好的指南是：https://dev.to/angular/setup-tailwindcss-in-angular-the-easy-way-1i5l。(如果发生此错误，这可能是解决方案)。
- 阅读tailwindCSS文档..。https://tailwindcss.com/docs/upgrading-to-v2显示，--有些类被重命名为，其他一些类获得了新的值。
Stack Overflow用户
发布于 2021-03-10 18:14:20
我也有同样的问题，我通过阅读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",
}),
],
};Stack Overflow用户
发布于 2021-08-17 16:46:43
我有这个问题。在我的例子中，我从另一个项目复制了我的配置，并忘记将postcss作为一个dev依赖项来安装。postcss没有给出一个关于缺少节点模块的错误，而是默默地失败并抱怨node.getIterator。
在研究这个问题时，我从postcss的作者那里读到，只有在postcss创建的AST树被插件破坏时，您才会看到这个错误。如果您的旧postcss插件是为postcss 7而不是最新的postcss 8设计的，则会发生这样的情况。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66255850
复制相关文章
相似问题
腾讯云开发者
