将 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'
         };
    })
    .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 Running webpack ...

ERROR Failed to compile with 1 errors

error in ./assets/css/tailwind.css

ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.

options has an unknown property 'config'. These properties are valid: object { postcssOptions?, execute?, sourceMap? }

Entrypoint tailwind = runtime.js

ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js): ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.

options has an unknown property 'config'. These properties are valid: object { postcssOptions?, execute?, sourceMap? } at validate (./node_modules/schema-utils/dist/validate.js:104:11) at Object.loader (./node_modules/postcss-loader/dist/index.js:43:29)" -t "Webpack Encore" error Command failed with exit code 2. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command

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

success Saved lockfile. success Saved 598 new dependencies. info Direct dependencies ├─ @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 已经通过将 config 选项移动到 postcssOptions 来更改他们的 api。

让我们尝试以下新选项：

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

将 TailwindCSS 与 Symfony Webpack Encore 结合使用

Using TailwindCSS with Symfony Webpack Encore

javascript

symfony

webpack

postcss

tailwind-css