使用 TailwindCSS 和 Symfony Webpack Encore

Posted 2023-03-06

【中文标题】使用 TailwindCSS 和 Symfony Webpack Encore

【英文标题】：Using TailwindCSS with Symfony Webpack Encore

【发布时间】：2021-03-23 04:30:07

【问题描述】：

我在使用 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'
         ;
    )
    .splitEntryChunks()

    .enableSingleRuntimeChunk()
    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    .enableVersioning(Encore.isProduction())

    .configureBabelPresetEnv((config) => 
        config.useBuiltIns = 'usage';
        config.corejs = 3;
    )

;

module.exports = Encore.getWebpackConfig();

tailwind.css

@tailwind base;

@tailwind components;

@tailwind utilities;

postcss.config.js

let tailwindcss = require('tailwindcss');

module.exports = 
    plugins: [
        tailwindcss('./tailwind.config.js'), // your tailwind.js configuration file path
        require('autoprefixer'),
        require('postcss-import')
    ]

tailwind.config.js

module.exports = 
  theme: 
    extend: 
  ,
  variants: ,
  plugins: [],
  prefix:,

这是yarn encore dev的输出

yarn run v1.22.0 运行 webpack ...

ERROR 编译失败，出现 1 个错误

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

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

options 具有未知属性“config”。这些属性是有效的：object postcssOptions?, execute?, sourceMap?

入口点tailwind = runtime.js

ModuleBuildError：模块构建失败（来自 ./node_modules/postcss-loader/dist/cjs.js）：验证错误：无效 选项对象。 PostCSS 加载器已使用选项初始化 与 API 架构不匹配的对象。

options 具有未知属性“config”。这些属性是有效的：object postcssOptions?, execute?, sourceMap? 在验证 (./node_modules/schema-utils/dist/validate.js:104:11) 在 Object.loader (./node_modules/postcss-loader/dist/index.js:43:29)" -t "Webpack Encore”错误命令失败，退出代码为 2. info 访问 https://yarnpkg.com/en/docs/cli/run 获取相关文档 命令

我有 node v14.15.0，我尝试了 yarn 升级。这是我的直接依赖项：

成功保存的锁文件。 成功保存了 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 不喜欢的内容。

有人能解释一下这个错误来自哪里以及如何纠正它吗？

【参考方案1】：

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

让我们尝试如下新选项：

Encore
// ...
.enablePostCssLoader((options) => 
  // new option outlined here https://webpack.js.org/loaders/postcss-loader/
  options.postcssOptions = 
    config: './postcss.config.js',
  ,
)