Переношу старую сборку на Node 18.12.0 и Webpack 5 и после обновления пакетов и конфигов перестал нормально собираться банд со стилями. Стили собираются но полностью игнорят синтаксис PostCSS, копируясь из файлов на прямую. То есть например, есть у нас вот такой вот вложенный блок на PostCSS:
{
......
&__inner {
display: grid;
grid-template-columns: 5fr 5fr;
grid-column-gap: 2%;
grid-row-gap: 15px;
}
}
Вот во что он превращается в бандле:
__inner.mfrs {
display: grid;
grid-template-columns: 5fr 5fr;
grid-column-gap: 2%;
grid-row-gap: 15px;
}
Блок PostCSS для адаптив использующий переменные:
.mfp-gallery {
.mfp {
&-arrow, &-close {
display: none;
}
&-content {
width: 600px;
max-height: 90vh;
@media (--max1024) {
width: 100%;
max-width: 90vw !important;
}
}
}
}
Превращается в это:
.mfp-gallery -content.mfp {
width: 600px;
max-height: 90vh;
}
@media (--max1024) {
.mfp-gallery -content.mfp {
width: 100%;
max-width: 90vw !important;
}
То есть переменны не сработали, амперсанд (&) ссылающийся на родительский блок тоже не фурычит. При этом сборщик не на что не ругается, в нём нет ничего кроме пары варнингов которые как мне кажется отношения к делу не имеют:
WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
main.css (1.01 MiB)
main.js (934 KiB)
WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
main (1.92 MiB)
main.css
main.js
WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/
Мой webpack.config.js:
const params = {
env: process.env.NODE_ENV || 'development'
};
const path = require('path');
const webpack = require('webpack');
const Dotenv = require('dotenv-webpack');
const plugins = {
miniCssExtractPlugin: require("mini-css-extract-plugin"),
svgLoader: require('svg-sprite-loader/plugin'),
cssOptimize: require('optimize-css-assets-webpack-plugin'),
jsOptimize: require('terser-webpack-plugin')
};
const postCss = {
postCssPresetEnv: require('postcss-preset-env'),
import: require('postcss-import'),
nested: require('postcss-nested'),
cssFor: require('postcss-for'),
simpleVars: require('postcss-simple-vars'),
flexbugs: require("postcss-flexbugs-fixes"),
inputStyle: require("postcss-input-style"),
objectFit: require("postcss-object-fit-images"),
gradientFix: require('postcss-gradient-transparency-fix'),
extend: require('postcss-extend'),
};
module.exports = {
context: path.resolve(__dirname + '/app'),
entry: {
subscription: './app-subscription.js',
critical: './app-crit.js',
main: './app.js',
},
stats: {children: false},
watch: params.env == 'development',
watchOptions: {
aggregateTimeout: 50
},
resolve: {
modules: [
(path.resolve(__dirname)),
(path.resolve(__dirname) + '/vendor'),
(path.resolve(__dirname) + '/node_modules')
],
extensions: ['*', '.js', '.css']
},
resolveLoader: {
modules: [
path.resolve(__dirname),
path.resolve(__dirname) + '/node_modules',
path.resolve(__dirname) + '/node_modules'
]
},
output: {
path: path.resolve(__dirname + '/build'),
publicPath: '/local/client/build/',
filename: '[name].js',
library: 'App'
},
module: {
rules: [
{
test: /\.css$/,
use: [
plugins.miniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
{
loader: "postcss-loader",
options: {
sourceMap: true,
postcssOptions: {
plugins: () => [
postCss.import(),
postCss.cssFor(),
postCss.simpleVars(),
postCss.postCssPresetEnv(),
postCss.nested(),
postCss.flexbugs(),
postCss.inputStyle(),
postCss.objectFit(),
postCss.gradientFix(),
postCss.extend(),
]
}
},
},
],
},
{
test: /\.js$/,
exclude: /(node_modules|vendor)/,
loader: 'babel-loader',
options: {
cacheDirectory: true,
presets: ['@babel/preset-env']
}
},
{
test: /\.(svg)$/,
use: [
{
loader: 'svg-sprite-loader',
options: {
extract: true,
}
},
'svg-transform-loader',
'svgo-loader'
]
}
]
},
plugins: [
new plugins.miniCssExtractPlugin({
filename: '[name].css'
}),
new plugins.svgLoader(),
new webpack.ProvidePlugin({
Swiper: 'swiper/dist/js/swiper.min.js',
vanillaTextMask: "vanilla-text-mask/dist/vanillaTextMask.js"
}),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
}),
new Dotenv({
path: (path.resolve(__dirname) + '/.env')
}),
]
};
if (params.env == 'production') {
module.exports.plugins.push(
new plugins.jsOptimize()
);
/*module.exports.plugins.push(
new plugins.cssOptimize({
cssProcessor: require('cssnano'),
})
);*/
}
Подскажите плиз что не так? Куда глядеть?
Простой
Сложный
