У меня возникли проблемы с настройкой 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]
├─ время работы регенератора@0.13.7
Как я уже говорил ранее, я не уверен, что не так, и моя попытка решить проблему самостоятельно не удалась. Кажется, ошибка исходит от postcss или, по крайней мере, чего-то внутри моего файла, что postcss не нравится.
Может ли кто-нибудь объяснить мне, откуда эта ошибка и как ее исправить?
🤔 А знаете ли вы, что...
JavaScript поддерживает асинхронное программирование с использованием промисов и асинхронных функций.
Похоже, 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',
},
})