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

问题描述

我正在尝试在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: {} }
]

我将不胜感激。

解决方法

您将需要创建一个Webpack插件，该插件监听emit钩子，并在CSS资源上运行，以生成单独的带前缀的CSS。

您可以从此RTLCSS plugin中汲取灵感，它生成CSS资产的“ RTL”版本。

您将需要创建一个提取供应商前缀的postcss插件（将代替rtlcss plugin应用）。 为了