将 TailwindCSS 与 Symfony Webpack Encore 结合使用

Question

我在使用 Symfony 设置 TailwindCSS 时遇到问题，我不确定出了什么问题

webpack.config.js

var 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 dev

yarn run v1.22.0 运行 webpack ...

错误 编译失败，有 1 个错误

./assets/css/tailwind.css 中的错误

ValidationError：选项对象无效。PostCSS Loader 已使用与 API 架构不匹配的选项对象进行初始化。

• options 有一个未知的属性“config”。这些属性是有效的：object { postcssOptions?,execute?,sourceMap? }

入口点 tailwind = runtime.js

ModuleBuildError：模块构建失败（来自 ./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',  },})