在 webpack 中使用 postcss-loader 和 RTLCSS 分离 RTL css 文件答案

【问题标题】：Separate RTL css file using postcss-loader and RTLCSS in webpack在 webpack 中使用 postcss-loader 和 RTLCSS 分离 RTL css 文件
【发布时间】：2022-11-05 08:42:05
【问题描述】：

如何使用 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: {}
    }
});

【问题讨论】：

标签： webpack postcss webpack-5 postcss-loader rtlcss

【解决方案1】：

您可以创建两个 Webpack 配置，一个包含您需要的所有规则，另一个仅用于 CSS 文件，包括使用 rtlcss 插件的 postcss-loader。稍后，在webpack.config.js 中，您应该返回一个包含这些配置的数组。

这里有一个例子。使用此配置将生成两个 CSS，[name].ltr.css 和 [name].rtl.css。最后一个是使用rtlcss翻转所有规则的CSS文件：

注意：getCommon 是一个实用函数，用于返回通用配置以避免重复相同的代码两次。

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

const getCommon = (dir) => ({
    mode: 'production',
    entry: './index.js',
    plugins: [
        new MiniCssExtractPlugin({
            filename: `styles/[name].${dir}.css`
        }),
    ]
});

module.exports = [
    {
        ...getCommon('ltr'),
        module: {
            rules: [
                /**
                 ** Here you can place the rules
                 ** for all the files that you want to process
                 ** apart from CSSs
                 **/
                {
                    test: /.s(a|c)ss$/,
                    use: [
                        {
                            loader: MiniCssExtractPlugin.loader,
                        },
                        'css-loader',
                        'sass-loader'
                    ]
                }
            ]
        }     
    },
    {
        ...getCommon('rtl'),
        module: {
            rules: [
                {
                    test: /.s(a|c)ss$/,
                    use: [
                        {
                            loader: MiniCssExtractPlugin.loader,
                        },
                        'css-loader',
                        {
                            loader: 'postcss-loader',
                            options: {
                                postcssOptions: {
                                    plugins: [
                                        rtlcss()
                                    ]
                                }
                            }
                        },
                        'sass-loader'
                    ]
                }
            ]
        }
        
    }
];

【讨论】：