使用webpack中的postpass加载程序和RTLCSS分离RTL-css文件

Question

如何使用postcss-loader和rtlcss创建单独的RTL-css文件？我添加到了postcss.config.js，但找不到任何关于定义输出文件的信息。我想使用{name}.rtl.{ext}格式，只是不知道如何在webpack或postpass配置文件中定义它。

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'
}
]
}
]
},
};

postss.config.js

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

Answer 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'
]
}
]
}

}
];