Использование TailwindCSS с Symfony Webpack Encore

У меня возникли проблемы с настройкой TailwindCSS с Symfony, и я не уверен, что не так

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();

попутный ветер.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')
    ]
}

хвостовой ветер.config.js

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

Вот результат yarn encore dev

yarn run v1.22.0 Запуск вебпака...

ОШИБКА Не удалось скомпилировать с 1 ошибкой

ошибка в ./assets/css/tailwind.css

ValidationError: Недопустимый объект опций. Загрузчик PostCSS был инициализируется с использованием объекта параметров, который не соответствует API схема.

  • options имеет неизвестное свойство 'config'. Допустимы следующие свойства: object { postcssOptions?, execute?, sourceMap? }

Точка входа попутный ветер = runtime.js

ModuleBuildError: Ошибка сборки модуля (из ./node_modules/postcss-loader/dist/cjs.js): ValidationError: Invalid объект опций. Загрузчик 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 для документации об этом команда

У меня есть узел v14.15.0, я пытался обновить пряжу. Вот мои прямые зависимости:

успех Сохраненный файл блокировки. успех Сохранено 598 новых зависимостей. информация Прямые зависимости ├─ @symfony/[email protected]

├─ автопрефиксер@10.1.0

├─ ядро[email protected]

├─ [email protected]

├─ [email protected]

├─ [email protected]

├─ [email protected]

├─ время работы регенератора@0.13.7

├─ [email protected]

└─ [email protected]

Как я уже говорил ранее, я не уверен, что не так, и моя попытка решить проблему самостоятельно не удалась. Кажется, ошибка исходит от postcss или, по крайней мере, чего-то внутри моего файла, что postcss не нравится.

Может ли кто-нибудь объяснить мне, откуда эта ошибка и как ее исправить?

🤔 А знаете ли вы, что...
JavaScript поддерживает асинхронное программирование с использованием промисов и асинхронных функций.


1
2 556
1

Ответ:

Решено

Похоже, postcss-loader уже изменили свой API, вместо этого переместив опцию config в postcssOptions.

Давайте попробуем с новой опцией следующим образом:

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