用postcss-loader和RTLCSS分离webpack中的RTL css文件
用postcss-loader和RTLCSS分离webpack中的RTL css文件
提问于 2022-08-24 12:58:32
如何使用postcss-加载程序和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
Stack Overflow用户
发布于 2022-11-05 00:42:05
您可以创建两个Webpack配置，一个配置包含所需的所有规则，另一个配置仅用于CSS文件，包括使用rtlcss插件的postcss-loader。稍后，在webpack.config.js中，您应该返回一个具有这些配置的数组。
这里有一个例子。使用此配置，将生成两个CSS，即[name].ltr.css和[name].rtl.css。最后一个是CSS文件，所有规则都使用rtlcss翻转。
注意：
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'
]
}
]
}
}
];页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73473633
复制相关文章
相似问题
腾讯云开发者
