将 TailwindCSS 与 Symfony Webpack Encore 结合使用

Question

我在使用 Symfony 设置 TailwindCSS 时遇到问题，我不确定出了什么问题webpack.config.jsvar Encore = require('@symfony/webpack-encore');if (!Encore.isRuntimeEnvironmentConfigured()) {    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');}Encore    .setOutputPath('public/build/')    .setPublicPath('/build')    .addStyleEntry('tailwind', './assets/css/tailwind.css')    .enablePostCssLoader((options) => {         options.config = {          // directory where the postcss.config.js file is stored                 path: './postcss.config.js'         };    })这是输出yarn encore devyarn run v1.22.0 运行 webpack ...错误 编译失败，有 1 个错误./assets/css/tailwind.css 中的错误ValidationError：选项对象无效。PostCSS Loader 已使用与 API 架构不匹配的选项对象进行初始化。options 有一个未知的属性“config”。这些属性是有效的：object { postcssOptions?,execute?,sourceMap? }入口点 tailwind = runtime.jsModuleBuildError：模块构建失败（来自 ./node_modules/postcss-loader/dist/cjs.js）：ValidationError：选项对象无效。PostCSS Loader 已使用与 API 架构不匹配的选项对象进行初始化。options 有一个未知的属性“config”。这些属性是有效的：object { postcssOptions?,execute?,sourceMap? } 在 validate (./node_modules/schema-utils/dist/validate.js:104:11) 在 Object.loader (./node_modules/postcss-loader/dist/index.js:43:29)" -t "Webpack Encore" 错误 命令失败，退出代码 2。信息 请访问 https://yarnpkg.com/en/docs/cli/run以获取有关此命令的文档我有节点 v14.15.0，我尝试进行纱线升级。这是我的直接依赖项：成功保存锁定文件。成功保存了 598 个新的依赖项。info 直接依赖 ├─ @symfony/ webpack-encore@0.33.0├─ autoprefixer@10.1.0├─ core-js@3.8.1├─ datatables.net@1.10.22├─ postcss-import@13.0.0├─ postcss-loader@4.1.0├─ postcss@8.2.1├─ regenerator-runtime@0.13.7├─ tailwindcss@2.0.2└─ webpack-notifier@1.12.0就像我之前所说的，我不确定出了什么问题，并且我尝试自己纠正问题失败了。该错误似乎来自 postcss 或至少来自我的文件中 postcss 不喜欢的内容。有人可以解释一下这个错误从何而来以及如何纠正吗？

Answer 1

看起来已经通过将选项postcss-loader移动到来更改他们的 api 。configpostcssOptions

让我们尝试使用以下新选项：

Encore

// ...

.enablePostCssLoader((options) => {

  // new option outlined here https://webpack.js.org/loaders/postcss-loader/

  options.postcssOptions = {

    config: './postcss.config.js',

  },

})