RTLCSS 和 Element Plus 与 Vue Js 项目

Question

由于 element plus 不支持 RTL，我不得不使用其他第三方库，例如

rtlcss

插件，实际上这解决了问题，但在我同时使用 rtl 和 ltr 方向的应用程序案例中，所以

rtlcss

插件无论 html dir 值如何，总是将样式转换为 rtl，这个问题有什么解决方案吗？

这是我的 vite.config.js 文件：

import { fileURLToPath, URL } from 'node:url';
import rtlcss from 'rtlcss';
import { defineConfig } from 'vite';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
import vue from '@vitejs/plugin-vue';
import tailwindcss from 'tailwindcss';


export default defineConfig({
  css: {
    postcss: {
      plugins: [
        rtlcss,
        tailwindcss,
      ],
    },
  },
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
});

Answer 1

自从你问这个问题以来已经有一段时间了。希望我的回答仍然可以帮助到你。

我是 postcss-rtlcss 的开发者，这个 postcss 插件的目的正是这个：使用 RTLCSS 构建一个包含两个方向的单个 CSS，这样你就可以使用单个 CSS 从 LTR 更改为 RTL CSS 文件。

只需在当前项目中执行以下步骤即可：

1. 卸载

   rtlcss

   （

   postcss-rtlcss

   在幕后使用

   rtlcss

   ）
2. 安装

   postcss-rtlcss

3. 从

   css

   配置中删除

   Vite

   配置（使用

   postcss

   配置更灵活）
4. 在项目的根目录中创建一个

   postcss.config.js

5. 将下一个配置添加到

   postcss.config.js

   文件

export default {
    plugins: {
        'postcss-rtlcss': {
            safeBothPrefix: true
        }
    }
 }

注意： safeBothPrefix 选项 将为那些包含可被特定性覆盖的声明的规则添加

[dir]

前缀。

就是这样，如果您更改 HTML 页面的

dir

参数，所有样式都会自动从 LTR 更改为 RTL。

我创建了一个最小的示例 Github 存储库，使用

Vite

和

Element Plus

。只需运行

npm install

，然后运行

npm dev

即可启动开发服务器。我在页面上放置了一个

ElSwitch

，将页面的方向从

ltr

更改为

rtl

，这样你就可以看到当

ElSwitch

变化时，页面的CSS如何变化。