Я обновляю свою старую сборку до Node версии 18.12.0 и Webpack 5, и после обновления пакетов и конфигураций возникла проблема с корректной сборкой бандла со стилями. Стили компилируются, однако синтаксис PostCSS полностью игнорируется, и они копируются напрямую из исходных файлов. Например, у меня есть такой вложенный блок на PostCSS:
```css
{
......
&__inner {
display: grid;
grid-template-columns: 5fr 5fr;
grid-column-gap: 2%;
grid-row-gap: 15px;
}
}
```
В результате он преобразуется в бандле следующим образом:
```css
__inner.mfrs {
display: grid;
grid-template-columns: 5fr 5fr;
grid-column-gap: 2%;
grid-row-gap: 15px;
}
```
Также есть блок PostCSS для адаптивной верстки с переменными:
```css
.mfp-gallery {
.mfp {
&-arrow, &-close {
display: none;
}
&-content {
width: 600px;
max-height: 90vh;
@media (--max1024) {
width: 100%;
max-width: 90vw !important;
}
}
}
}
```
Однако он превращается в:
```css
.mfp-gallery -content.mfp {
width: 600px;
max-height: 90vh;
}
@media (--max1024) {
.mfp-gallery -content.mfp {
width: 100%;
max-width: 90vw !important;
}
}
```
Что означает, что переменные не работают, а амперсанд (&), ссылающийся на родительский блок, также не функционирует. При этом сборщик не выдает ошибок, кроме нескольких предупреждений, которые, как мне кажется, не относятся к данной проблеме:
```
WARNING in ass
```
Проблема, с которой вы столкнулись, может быть связана с конфигурацией PostCSS и его плагинов в вашем проекте. Поскольку вы обновили свою сборку до Node версии 18.12.0 и Webpack 5, некоторые настройки или плагины могут требовать обновления, чтобы корректно обрабатывать синтаксис, который вы используете.
Вот несколько шагов, которые могут помочь вам решить эту проблему:
1. **Убедитесь, что PostCSS установлен и настроен:**
Убедитесь, что у вас установлен `postcss-loader` и сам PostCSS. Если у вас еще нет конфигурации PostCSS, создайте файл `postcss.config.js` с необходимыми плагинами.
Например:
```javascript
module.exports = {
plugins: [
require('postcss-nested'), // для обработки вложенных селекторов
require('postcss-custom-properties'), // для поддержки переменных CSS
require('autoprefixer'), // для добавления вендорных префиксов
// Можно добавить больше плагинов в зависимости от ваших нужд
]
};
```
2. **Проверьте конфигурацию Webpack:**
Убедитесь, что в вашем `webpack.config.js` правильно настроен обработчик CSS с использованием `postcss-loader`. Пример настройки может выглядеть так:
```javascript
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader', // или MiniCssExtractPlugin.loader
'css-loader',
'postcss-loader' // обязательно после css-loader
]
}
]
}
};
```
3. **Проверьте версии пакетов:**
Обновите все пакеты, связанные с PostCSS, `postcss-loader`, `css-loader`, `style-loader` и другие, до последних совместимых версий. Вы можете использовать следующие команды:
```bash
npm install postcss postcss-loader autoprefixer postcss-nested --save-dev
```
4. **Убедитесь, что синтаксис PostCSS поддерживается:**
Убедитесь, что синтаксис, который вы используете (вложенные правила и переменные), поддерживается плагинами PostCSS, которые вы установили.
5. **Логи сборки:**
Проверьте логи сборки на наличие других предупреждений или ошибок, которые могут указывать на проблемы с конфигурацией.
6. **Пример.**
Пример вашей конфигурации может выглядеть так:
```javascript
module.exports = {
// остальная часть конфигурации...
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
'postcss-nested',
'postcss-custom-properties',
'autoprefixer'
]
}
}
}
]
}
]
}
};
```
Если после выполнения всех перечисленных шагов проблема не решится, предоставьте дополнительную информацию о конфигурации Webpack и используемых пакетах, чтобы мы могли помочь вам более точно.
Починить сборку помогло удаление плагина postcss-preset-env из конфига вебпака