TailwindCSS 与 Webpack 项目

Posted 2023-03-06

【中文标题】TailwindCSS 与 Webpack 项目

【英文标题】：TailwindCSS with Webpack project

【发布时间】：2021-08-27 04:50:12

【问题描述】：

对不起，我正在尝试制作使用 TailwindCSS（PostCSS 插件）、Webpack v5、babel、eslint 和 stylelint 的 Electronjs 项目，但我遇到了这个错误（运行 webpack serve --color --progress --config webpack.dev.js 时）。感谢您的帮助 我的错误图片在这里：Error

如果你也想要的话，日志在这里：

ERROR in ./src/main.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/prettier-loader/prettier-loader.js):
SyntaxError: Leading decorators must be attached to a class declaration. (1:9)
> 1 | @import 'tailwindcss/base';
    |         ^
  2 | @import 'tailwindcss/components';
  3 | @import 'tailwindcss/utilities';
  4 | @import './css/font.css';
    at Us (D:\genzoc\node_modules\prettier\parser-babel.js:22:7277)
    at tn (D:\genzoc\node_modules\prettier\parser-babel.js:22:66392)
    at Object.parse (D:\genzoc\node_modules\prettier\parser-babel.js:22:334269)
    at Object.parse$a [as parse] (D:\genzoc\node_modules\prettier\index.js:13652:19)
    at coreFormat (D:\genzoc\node_modules\prettier\index.js:15183:16)
    at formatWithCursor$1 (D:\genzoc\node_modules\prettier\index.js:15423:14)
    at D:\genzoc\node_modules\prettier\index.js:60171:12
    at Object.format (D:\genzoc\node_modules\prettier\index.js:60191:12)
    at Object.module.exports (D:\genzoc\node_modules\prettier-loader\prettier-loader.js:98:31)
    at processResult (D:\genzoc\node_modules\webpack\lib\NormalModule.js:703:19)
    at D:\genzoc\node_modules\webpack\lib\NormalModule.js:809:5
    at D:\genzoc\node_modules\loader-runner\lib\LoaderRunner.js:399:11
    at D:\genzoc\node_modules\loader-runner\lib\LoaderRunner.js:251:18
    at context.callback (D:\genzoc\node_modules\loader-runner\lib\LoaderRunner.js:124:13)
    at Object.module.exports (D:\genzoc\node_modules\prettier-loader\prettier-loader.js:100:12)
 @ ./src/main.js 1:0-20

我的仓库是here: https://github.com/Cokaps/GenZOC

【参考方案1】：

好吧，你有没有尝试在其他 linter 之前加载 postcss？ （在您的配置中，prettier-loader 在 postcss 之前运行。您可能希望禁用这些 linters（移动到另一个文件，因为 linting 在您的情况下是无用的，您正在尝试 lint 依赖项）