用于组合媒体查询的 Webpack 加载器? [英] Webpack loader for combine media queries?

问题描述

你知道是否有一个模块可以将媒体查询与 Webpack 结合起来?

Do you know if there is a module that allows combine media queries with Webpack ?

对于 grunt 或 gulp，我知道这个模块，但它不在 webpack 上.

For grunt or gulp, i know this module but It is not on webpack.

谢谢！

推荐答案

查看postcss-move-media后；我注意到它只是一个空壳项目，实际上并没有做任何事情.

After looking at postcss-move-media; I noticed that it's just an empty shell project, that doesn't actually do anything.

我发现了另一个 PostCSS 插件，它似乎可以解决问题.https://www.npmjs.com/package/css-mqpacker

I found another PostCSS plugin that seems to do the trick though. https://www.npmjs.com/package/css-mqpacker

请注意，该包已被作者弃用，请谨慎使用.

Note that the package has been deprecated by the author, so use it with caution.

从 NPM 安装.

npm install css-mqpacker --save-dev

步骤 2

将它包含在你的 PostCSS 配置中.
那可以是 postcss.config.js 文件:

module.exports = {
    /* ... */
    plugins: {
        'cs-mqpacker': {},
    },
};

或者，如果你使用 Laravel Mix，通过选项键:

Or, if you use Laravel Mix, via the options key:

mix.sass('resources/sass/styles.scss', 'public/css')
.options({
    postCss: [
        require('css-mqpacker'),
    ],
});

这篇关于用于组合媒体查询的 Webpack 加载器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！