为了组合媒体查询,我必须使用什么 webpack 加载器,或者现在没有这样的加载器?在我的项目中,我使用 style-loader、css-loader、postcss-loader 和 sass-loader 来构建样式表。但是,它们都没有结合媒体查询。我只需要一个 webpack 加载器,就像 grunt/gulp-combine-media-queries 一样。
提前致谢。
为了组合媒体查询,我必须使用什么 webpack 加载器,或者现在没有这样的加载器?在我的项目中,我使用 style-loader、css-loader、postcss-loader 和 sass-loader 来构建样式表。但是,它们都没有结合媒体查询。我只需要一个 webpack 加载器,就像 grunt/gulp-combine-media-queries 一样。
提前致谢。
CSSO及其forceMediaMerge
选项是一种无需任何额外插件的方式。
通过被其他规则拆分,启用@media 规则与相同媒体查询的合并。优化通常是不安全的,但在大多数情况下应该可以正常工作。自行承担使用风险。
您可以使用css-mqpacker,它也可以用作 PostCSS 插件。
这是 webpack 项目中 postcss.config.js 文件的示例。
module.exports = {
plugins: [
require('autoprefixer')({
browsers: ['last 2 versions', 'ie >= 11']
}),
require("css-mqpacker"),
require('cssnano')({ zindex: false })
]
};