Quantcast
Channel: Active questions tagged symfony4 - Stack Overflow
Viewing all articles
Browse latest Browse all 3925

using group-css-media-queries with webpack Encore

$
0
0

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

Viewing all articles
Browse latest Browse all 3925

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>