メディアクエリーを結合するためにどのwebpackローダーを使用する必要がありますか？

Question

メディアクエリーを組み合わせるには、どのwebpackローダーを使用する必要がありますか、またはそのようなローダーは現在ありません。 私のプロジェクトでは、スタイル・ローダー、css-loader、postcss-loader、およびsass-loaderを使用してスタイルシートを作成します。しかし、それらのどれもがメディアクエリを組み合わせません。 grunt/gulp-combine-media-queriesのようなWebpackローダーが必要です。

ありがとうございます。

Answer 1

あなたはcss-mqpacker https://www.npmjs.com/package/css-mqpackermを使うことができます。PostCSSプラグインとしても使用できます。

Webpackプロジェクトのpostcss.config.jsファイルの例を次に示します。

module.exports = { 
 
    plugins: [ 
 
     require('autoprefixer')({ 
 
      browsers: ['last 2 versions', 'ie >= 11'] 
 
     }), 
 
     require("css-mqpacker"), 
 
     require('cssnano')({ zindex: false }) 
 
    ] 
 
};