在create-react-app中生成RTL CSS文件，并根据状态变化在它们之间进行切换

Question

我正在将create-react-app用于多语言项目。我想使用“ cssJanus”或“ rtlcss”之类的库将Sass生成的CSS文件转换为单独的文件，然后在切换到另一种语言时使用该新生成的文件。

这是我的index.js的样子...

import React from "react";
import ReactDOM from "react-dom";
import * as serviceWorker from "./serviceWorker";
import { BrowserRouter as Router } from "react-router-dom";
import { Provider } from "react-redux";
import App from "./App";
import { configureStore } from "./store/configureStore";

const store = configureStore();

ReactDOM.render(
    <Provider store={store}>
        <Router>
            <App />
        </Router>
    </Provider>,
    document.getElementById("root")
);

serviceWorker.unregister();

这就是我的“ App.js”的样子……

import React, { Component } from "react";
import "./App.scss";
import { Route, Switch } from "react-router-dom";
import SignIn from "./features/signin/SignIn";

class App extends Component {
    render() {
        return (
            <>
                <Switch>
                    <Route path="/" exact component={SignIn} />
                </Switch>
            </>
        );
    }
}

export default App;

如您所见，我使用的是“ ./App.scss”文件，该文件只对“ ./src/css/”目录中的另一个“ .scss”文件具有一堆@import语句...

/* autoprefixer grid: on */
@import "css/reset";
@import "css/variables";
@import "css/global";

我需要您的建议。如何将生成的CSS从App.scss转换为RTL到自己的.css文件，以及如何根据全局状态的变化在它们和原始生成的CSS之间切换。

我搜寻了很多类似的东西，但是没有运气。

或者，如果您有更好的方法，我会全力以赴。

Answer 1

这是一个简单的解决方案，需要弹出并添加一个轻量级的webpack-rtl-plugin.

运行后

npx create-react-app react-rtl 
cd react-rtl
yarn eject
yarn add -D webpack-rtl-plugin @babel/plugin-transform-react-jsx-source

转到config/webpack.config.js并进行一些调整：

// import the plugin
const WebpackRTLPlugin = require('webpack-rtl-plugin')

// ...

module: { ... }
plugins: [
   // ...,
   // use the plugin
   new WebpackRTLPlugin({ diffOnly: true })
].filter(Boolean),
// ...

在此阶段，如果您运行yarn build并查找build/static/css文件夹，您应该会看到.rtl.css包含您的 rtl 样式的其他文件。然后，我们需要告诉webpack利用MiniCssExtractPlugin.loader的发展，以及因此将通过服务风格link标签，而不是内嵌样式：

// common function to get style loaders
const getStyleLoaders = (cssOptions, preProcessor) => {
  const loaders = [
    isEnvDevelopment && { loader: MiniCssExtractPlugin.loader }, // <-- use this
    // isEnvDevelopment && require.resolve('style-loader'), <-- instead of this 

并且不要忘记插件，大声笑：

module: { ... }
plugins: [
   // ...,

   // isEnvProduction &&      <-- comment this out
   new MiniCssExtractPlugin({
     // Options similar to the same options in webpackOptions.output
     // both options are optional
     filename: 'static/css/[name].[contenthash:8].css',
     chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
   }),

   // ...
].filter(Boolean),

从这里您终于可以获取默认样式表href并用于插入 rtl 样式。以下是您可以如何实施它：

class RtlCssBundleService {
  constructor() {
    this.rtlApplied = false
    this.rtlStyles = [];
    this.ltrStyles = Array.from(
      document.querySelectorAll('link[rel="stylesheet"]')
    )
  }

  insert = () => {
    if (this.rtlApplied) { return }

    this.rtlApplied = true

    if (this.rtlStyles.length) {
      return this.rtlStyles.forEach(style => {
        document.body.appendChild(style)
      })
    }

    this.rtlStyles = this.ltrStyles.map(styleSheet => {
      const link = document.createElement("link")
      link.href = styleSheet.href.replace(/\.css$/, '.rtl.css')
      link.rel = "stylesheet"
      document.body.appendChild(link)
      return link
    })
  }

  detach = () => {
    this.rtlApplied = false
    this.rtlStyles.forEach(style => {
      document.body.removeChild(style)
    })
  }

  toggle = () => {
    return this.rtlApplied
      ? this.detach()
      : this.insert()
  }
}

const rtlStyles = new RtlCssBundleService()

export default rtlStyles

然后从您的任何组件中使用它。所以无论如何，我确定我错过了一些东西，也许这是一种糟糕的方法，但它似乎有效，这是演示

Answer 2

环顾四周，有一个来自airbnb 的名为react-with-direction 的库，它提供了一个DirectionProvider - 组件，您可以根据语言将组件包装在其中。希望有帮助。