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

背景：安装 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模块

1. 把文件名改成 .mjs，比如 postcss.config.mjs

2. 或者在 package.json 里加上：

   "type": "module"

3. 然后把内容改写成：

   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*/  

 

🔹 为什么 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 需要处理兼容性（通常没问题）