我必须使用啥 webpack 加载器来组合媒体查询？

Posted 2023-02-21

【中文标题】我必须使用啥 webpack 加载器来组合媒体查询？

【英文标题】：What webpack loader do I have to use to combine media queries?我必须使用什么 webpack 加载器来组合媒体查询？

【发布时间】：2016-09-05 00:24:13

【问题描述】：

为了组合媒体查询，我必须使用什么 webpack 加载器，或者现在没有这样的加载器？ 在我的项目中，我使用 style-loader、css-loader、postcss-loader 和 sass-loader 来构建样式表。但是，它们都没有结合媒体查询。 我只需要一个 webpack 加载器，就像 grunt/gulp-combine-media-queries 一样。

提前致谢。

【问题讨论】：

试试这个postcss插件：github.com/hail2u/node-css-mqpacker

@bob-sponge 使用插件，我终于解决了这个问题。非常感谢！

对不起，我可以在 webpack 中包含这个模块吗？

Webpack loader for combine media queries?的可能重复

【参考方案1】：

您可以使用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 )
    ]
;

【参考方案2】：

CSSO 及其 forceMediaMerge 选项是一种无需任何额外插件的方法。

允许将@media 规则与相同的媒体查询合并，并通过其他规则拆分。优化通常是不安全的，但在大多数情况下应该可以正常工作。使用它需要您自担风险。