webpack - 在单独的文件中生成 CSS 浏览器前缀

Question

我试图在 Webpack 中生成两个单独的 css 表：style.css 和 style-prefixes.css 仅带有前缀。目前，它会生成一个包含所有样式和前缀的文件。我在 webpack 中的加载器：

scss = {
test: /\.scss$/,
use: [
    {
        loader: MiniCssExtractPlugin.loader,
        options: {
            publicPath: '../'
        }
    },
    { loader: "css-loader", options: {} },
    {
        loader: "postcss-loader",
        options: {
            ident: 'postcss',
            sourceMap: true,
            plugins: [
                require('autoprefixer')({
                    'browsers': ['> 1%', 'last 2 versions']
                }),
                require('cssnano')({
                    zindex: false
                })
            ]
        }
    },
    { loader: "sass-loader", options: {} }
]

我将不胜感激。

Answer 1

您将需要创建一个 Webpack 插件来侦听emit钩子，并在 css 资产上运行，以生成单独的前缀 css。

您可以从这个RTLCSS 插件中获得灵感，该插件生成“RTL”版本的 css 资产。

您将需要创建一个提取供应商前缀的postcss插件（将被应用而不是rtlcssplugin ）。为了