如何通过postcss-loader与RTLCSS在Webpack中生成独立RTL CSS文件

希望借助postcss-loader和rtlcss生成独立的RTL CSS文件，已在postcss.config.js中配置相关插件，但不清楚如何将输出文件定义为{name}.rtl.{ext}格式，寻求Webpack或PostCSS的配置方案。

现有配置文件如下：

webpack.config.js #

module.exports = {
    module: {
        rules: [
            {
                test: /\.(sass|scss)$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader
                    }, {
                        loader: 'css-loader',
                        options: {
                            url: false,
                            importLoaders: 1
                        }
                    }, {
                        loader: 'sass-loader'
                    }, {
                        loader: 'postcss-loader'
                    }
                ]
            }
        ]
    },
};

postcss.config.js #

module.exports = ({ file, options, env }) => ({
    plugins: {
        autoprefixer: {
            cascade: false
        },
        rtlcss: {}
    }
});

方案1：通过独立文件后缀生成RTL CSS #

适合维护单独RTL样式文件的场景，给RTL文件加上.rtl后缀，Webpack会自动生成带.rtl标识的输出文件。

1. 更新webpack.config.js，添加RTL专属处理规则，并配置MiniCssExtractPlugin的输出命名：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    module: {
        rules: [
            // 处理常规LTR样式，排除RTL后缀文件
            {
                test: /\.(sass|scss)$/,
                exclude: /\.rtl\.(sass|scss)$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            url: false,
                            importLoaders: 1
                        }
                    },
                    'sass-loader',
                    'postcss-loader'
                ]
            },
            // 处理RTL样式，指定输出文件名格式
            {
                test: /\.rtl\.(sass|scss)$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            filename: '[name].rtl.css',
                            chunkFilename: '[id].rtl.css'
                        }
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            url: false,
                            importLoaders: 1
                        }
                    },
                    'sass-loader',
                    'postcss-loader'
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].css',
            chunkFilename: '[id].css'
        })
    ]
};

2. 修改postcss.config.js，仅对RTL后缀文件启用rtlcss插件：

module.exports = ({ file, options, env }) => {
    const plugins = {
        autoprefixer: {
            cascade: false
        }
    };
    // 检测文件名是否包含.rtl.，是则启用rtlcss
    if (file.filename.includes('.rtl.')) {
        plugins.rtlcss = {};
    }
    return { plugins };
};

使用时，创建xxx.rtl.scss文件，Webpack编译后会生成对应的xxx.rtl.css。

方案2：通过资源查询参数生成RTL CSS #

无需创建单独文件，在导入样式时添加?rtl参数，即可生成RTL版本的CSS文件。

1. 更新webpack.config.js，通过resourceQuery区分LTR和RTL请求：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    module: {
        rules: [
            {
                test: /\.(sass|scss)$/,
                oneOf: [
                    // 处理带?rtl参数的样式请求
                    {
                        resourceQuery: /rtl/,
                        use: [
                            {
                                loader: MiniCssExtractPlugin.loader,
                                options: {
                                    filename: '[name].rtl.css',
                                    chunkFilename: '[id].rtl.css'
                                }
                            },
                            {
                                loader: 'css-loader',
                                options: {
                                    url: false,
                                    importLoaders: 1
                                }
                            },
                            'sass-loader',
                            'postcss-loader'
                        ]
                    },
                    // 处理常规LTR样式
                    {
                        use: [
                            MiniCssExtractPlugin.loader,
                            {
                                loader: 'css-loader',
                                options: {
                                    url: false,
                                    importLoaders: 1
                                }
                            },
                            'sass-loader',
                            'postcss-loader'
                        ]
                    }
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].css',
            chunkFilename: '[id].css'
        })
    ]
};

2. 修改postcss.config.js，根据资源查询参数判断是否启用rtlcss：

module.exports = ({ file, options, env }) => {
    const plugins = {
        autoprefixer: {
            cascade: false
        }
    };
    // 检测资源查询中是否包含rtl参数
    if (file.resourceQuery.includes('rtl')) {
        plugins.rtlcss = {};
    }
    return { plugins };
};

使用时，在JS中这样导入：

// 生成常规LTR CSS
import './styles.scss';
// 生成带.rtl后缀的RTL CSS
import './styles.scss?rtl';

注意事项 #

• 确保已安装所有依赖包：mini-css-extract-plugin、css-loader、sass-loader、postcss-loader、autoprefixer、rtlcss
• 两种方案可根据项目样式维护习惯选择，独立文件方式更适合自定义RTL样式的场景，参数方式适合直接转换原样式的场景

内容的提问来源于stack exchange，提问作者levipadre