i'm using Webpack Encore in a Symfony 4 project.
As css preprocessor, i use SCSS.
I use @media directly in the properties, so my compilated css is full of redondant @media declaration.
I want to add group-css-media-queries in the Webpack Encore configuration to group all same @media declaration.
I can't find anything about modifying a loader in the Webpack Encore Documentation.
I think, group-css-media-queries must be added in the postCompilation, just before minimisation (for prodution).
Someone has an way to do that ?
This is my Webpack Encore Configuration :
var Encore = require('@symfony/webpack-encore');
const SVGSpritemapPlugin = require('svg-spritemap-webpack-plugin');
if (!Encore.isRuntimeEnvironmentConfigured()) {
Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}
Encore
.setOutputPath('public/build/')
.setPublicPath('/build')
.addStyleEntry('css/styles', './assets/scss/styles.scss')
.addStyleEntry('css/partial', './assets/scss/partial.scss')
.addEntry('js/app', './assets/js/app.js')
.splitEntryChunks()
.enableSingleRuntimeChunk()
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
.enableVersioning(Encore.isProduction())
.configureBabel(() => {}, {
useBuiltIns: 'usage',
corejs: 3
})
.enableSassLoader()
.enablePostCssLoader()
.enableIntegrityHashes(Encore.isProduction())
.copyFiles({
from: './assets/images',
to: Encore.isProduction() ? 'images/[path][name].[hash:8].[ext]' : 'images/[path][name].[ext]',
pattern: /\.(png|jpg|jpeg|gif|svg)$/
})
.copyFiles({
from: './assets/fonts',
to: Encore.isProduction() ? 'fonts/[path][name].[hash:8].[ext]' : 'fonts/[path][name].[ext]',
pattern: /\.(ttf|woff(2)|eot|svg)$/
})
.addPlugin(new SVGSpritemapPlugin(
'assets/icons/*.svg', {
output: {
filename: Encore.isProduction() ? 'icons/sprite.svg' : 'icons/sprite.svg',
svg4everybody: true,
svgo: true
}
}
))
;
module.exports = Encore.getWebpackConfig();