报错 | 配置 postcss 出现报错：A `require()` style import is forbidden.-CSDN博客

本文链接：https://blog.csdn.net/weixin_42479421/article/details/147392802

背景：安装 postcss，配置时，出现报错：A `require()` style import is forbidden.

翻译：禁止导入require（）样式

解决：前头添加 **/* eslint-env node */** ，也飘红，飘红原因可能是 eslint 格式问题（若不影响插件功能，无碍）。

注：再不行，考虑本文中的统一使用es模块方法（改写）

安装 each 后，测试，发现，成功显示！即 postcss生效！

1. 安装each: npm install postcss-each --save-dev

2. 配置：require('postcss-nested')

3. 应用：使用each

查看结果，成功显示！

飘红可能原因：代码检查严格。另外，/* eslint-env node */生效了。

**/* eslint-env node */** 是 eslint 环境注释指令 ——作用：告诉 eslint，这个文件在node.js环境下，请使用node.js的全局变量和语法来校验。

它让 ESLint 知道：

require 是合法的（不会报未定义）

module.exports 是合法的

__dirname、process 等 Node 的全局变量不会被误报

常见于：

vite.config.js

postcss.config.js

webpack.config.js

.eslintrc.js

server.js 等 Node 相关脚本

★ 未来相统一使用es模块

把文件名改成 .mjs，比如 postcss.config.mjs
或者在 package.json 里加上：

"type": "module"

然后把内容改写成：

import postcssEachVariables from 'postcss-each-variables'
import postcssNested from 'postcss-nested'
import postcssEach from 'postcss-each'
import postcssFor from 'postcss-for'
import postcssColorMix from 'postcss-color-mix'

export default {
  plugins: [
    postcssEachVariables,
    postcssNested,
    postcssEach({
      plugins: {
        beforeEach: [
          postcssFor,
          postcssColorMix
        ]
      }
    }),
  ]
}

如果你对兼容性、可维护性有更高要求，可以逐步过渡到 ESM 模式，但不是必须。

其他相关知识点——关于 esm 格式和 CommonJS 格式：

本次使用的是 es 模块（ESM）

判断依据： ① ESM 格式（即 `import` / `export`）；② CommonJS 的 `require`/`module.exports`

✅ 1. 使用 Vite：

vite 是一个基于 ES Modules 的现代前端构建工具，不支持 CommonJS 的 require/module.exports 方式作为默认模块系统。
Vite 默认要求你的项目使用 ESM 格式（即 import / export）。

🔹 Vite 是构建工具，不是 Node.js 本地运行

重点：Vite 本身使用的是现代浏览器和 ESBuild（支持原生 ESM），不依赖 Node.js 的模块加载规则。

所以即使不写 "type": "module"，只要你在代码中写的是 import / export，Vite 就会把它当成 ESM 来处理。

🔹 在 Vite 中如何判断模块类型？

场景处理方式
.ts / .vue / .js 文件中使用 import / export 默认按 ESM 处理
.cjs 文件明确为 CommonJS
.mjs 文件明确为 ESM
node_modules 中的包是 CommonJS（如 lodash） Vite 会通过 Rollup 插件自动做兼容打包
如果你用了 require() 会报错，除非你在 .cjs 文件中或做特殊配置

如，在文件开头中，声明 /* eslint-env node*/

场景	处理方式
`.ts` / `.vue` / `.js` 文件中使用 `import` / `export`	默认按 ESM 处理
`.cjs` 文件	明确为 CommonJS
`.mjs` 文件	明确为 ESM
`node_modules` 中的包是 CommonJS（如 lodash）	Vite 会通过 Rollup 插件自动做兼容打包
如果你用了 `require()`	会报错，除非你在 `.cjs` 文件中或做特殊配置

🔹 为什么 Node.js 会关心 "type"，但 Vite 不会？

这是因为：

✅ Node.js 中：

没有 "type": "module" 时，.js 默认是 CommonJS；

有 "type": "module" 时，.js 被当成 ESM，require() 就不能用了。

✅ Vite 中：

是通过 ESBuild + Rollup 解析语法，而不是直接由 Node.js 来执行源代码；

所以哪怕你不写 "type": "module"，只要你使用 import，它也会被识别为 ESM。

✅ 2. 使用 Vue 3：

Vue 3 自身的构建目标是 ESM-first，官方推荐使用现代模块格式。
依赖中使用了很多现代插件（如 @vitejs/plugin-vue、vitepress、unplugin-vue-macros 等），这些都基于 ESM 开发。

⚠️ 那什么时候需要关心 CommonJS vs ESM？

场景是否相关
构建 Vue + Vite 项目 ✅ ESM 优先
在 Node.js 中运行 .js 文件 ✅ 是否写 "type": "module" 很关键
使用第三方库（老库） ⚠️ 如果库是 CommonJS，Vite 需要处理兼容性（通常没问题）

场景	是否相关
构建 Vue + Vite 项目	✅ ESM 优先
在 Node.js 中运行 `.js` 文件	✅ 是否写 `"type": "module"` 很关键
使用第三方库（老库）	⚠️ 如果库是 CommonJS，Vite 需要处理兼容性（通常没问题）