[英]How to convert postcss.config.js and tailwind.config.js to ES modules?
I created a new Vue app using Vite via npm init vue@latest
.我通过
npm init vue@latest
使用 Vite 创建了一个新的 Vue 应用程序。 I added TailwindCSS to the project based on the official guide .我根据官方指南将TailwindCSS添加到项目中。
Running npm run lint
throws errors运行
npm run lint
抛出错误
error 'module' is not defined no-undef
错误“模块”未定义 no-undef
because it wants postcss.config.js and tailwind.config.js to be ES modules (I think).因为它希望postcss.config.js和tailwind.config.js成为 ES 模块(我认为)。
When converting postcss.config.js from将postcss.config.js从
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
to到
export const plugins = {
tailwindcss: {},
autoprefixer: {},
};
and tailwind.config.js from和tailwind.config.js来自
module.exports = {
content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
theme: {
extend: {},
},
plugins: [],
};
to到
export const content = ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"];
export const theme = {
extend: {},
};
export const plugins = [];
and running npm run dev
the app crashes with the error并运行
npm run dev
应用程序崩溃并出现错误
[vite] Internal server error: Unexpected token 'export' Plugin: vite:css
[vite] 内部服务器错误:意外的令牌“导出”插件:vite:css
How do I solve this linting error?如何解决此 linting 错误?
You can actually keep those config files as CommonJS.您实际上可以将这些配置文件保留为 CommonJS。 ESLint's
env
needs to be set to node
in those config files because Node is the actual environment during the build. ESLint 的
env
需要在这些配置文件中设置为node
,因为 Node 是构建期间的实际环境。
Insert this comment at the top of postcss.config.js
and tailwind.config.js
:在
postcss.config.js
和tailwind.config.js
的顶部插入此注释:
/* eslint-env node */
env
for *.config.js
*.config.js
env
环境Configure overrides
to set env
for *.config.js
files:配置
overrides
以设置*.config.js
env
的环境:
// .eslintrc.cjs
module.exports = {
⋮
overrides: [
{
files: ['*.config.js'],
env: {
node: true,
},
},
],
}
If using VS Code, you'll likely need to restart the ESLint server (or the IDE) to reload the configuration.如果使用 VS Code,您可能需要重新启动 ESLint 服务器(或 IDE)以重新加载配置。
*.config.js
*.config.js
的 ESLint 规则Configure ignorePatterns
to not lint these config files: ignorePatterns
配置为不对这些配置文件进行 lint:
// .eslintrc.cjs
module.exports = {
⋮
ignorePatterns: ['*.config.js'],
}
If using VS Code, you'll likely need to restart the ESLint server (or the IDE) to reload the configuration.如果使用 VS Code,您可能需要重新启动 ESLint 服务器(或 IDE)以重新加载配置。
Rename the files to postcss.config.cjs
resp.将文件重命名为
postcss.config.cjs
。 tailwind.config.cjs
. tailwind.config.cjs
。 Note the c
in cjs
, which stands fro CommonJS Module.请注意
cjs
中的c
,它代表 CommonJS 模块。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.