使用 TailwindCSS 和 Symfony Webpack Encore答案

【问题标题】：Using TailwindCSS with Symfony Webpack Encore使用 TailwindCSS 和 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 不喜欢的内容。

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

【问题讨论】：

标签： javascript symfony webpack tailwind-css 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',
  },
})

【讨论】：