根据文本方向属性提供不同的 SCSS 文件

Question

我只有两个 SCSS 文件。一个叫app.scss，另一个叫app-rtl.scss。

它们之间的区别在于一个具有从右到左处理的 SCSS 文件（导入 rtl 文件）。我要解决的是，一旦dir 是 rtl，那么我想使用另一个文件 (app-rtl.scss)。

我在后端使用 Node（主要是 API），在前端使用 React。

如果有人对我能做什么提出建议，我将不胜感激。

更新

只是为了澄清一些事情。我使用了 create-react-app 包然后弹出来添加 SCSS。这就是我目前获取样式表的方式（一个样式表）

index.js

import '../scss/app.scss'; // this where I'm getting all the styles.

这就是那个文件的样子。

app.scss

// Override default value for $dir in directional
$dir: ltr;

// Import helpers from directional
@import "base/directional";

@import "base/variables";

// Import helpers from bootestrap
@import "bootstrap/functions";
@import "bootstrap/variables";
@import "bootstrap/mixins";
@import "bootstrap/root";
@import "bootstrap/reboot";
@import "bootstrap/type";
@import "bootstrap/images";
//@import "bootstrap/code";
@import "bootstrap/grid";
//@import "bootstrap/tables";
@import "bootstrap/forms";
//@import "bootstrap/buttons";
@import "bootstrap/transitions";
@import "bootstrap/dropdown";
@import "bootstrap/button-group";
@import "bootstrap/input-group";
@import "bootstrap/custom-forms";
@import "bootstrap/nav";
@import "bootstrap/navbar";
@import "bootstrap/card";
.
.
.

app-rtl.scss 有一堆从右到左的 scss 文件。

如果我想使用 Webpack，如何将其编译为两个 CSS 文件，然后应用答案中为我建议的内容？如果从 Node 处理这个，我也使用这种方法。

P.S：我对 Webpack 不太熟悉，但我认为这是完成这项工作的方法：

          {
            test: /\.scss$/,
            loaders: [
              require.resolve('style-loader'),
              require.resolve('css-loader'),
              require.resolve('fast-sass-loader')
            ]
          },
          {
            test: /\.css$/,
            loaders: [
              require.resolve('style-loader'),
              require.resolve('css-loader'),
            ]
          },

Answer 1

我有 3 个样式表，其中一个用于正常方向，一个共享样式文件要导入两者，然后是 rtl 样式表

// shared.scss
@import "bootstrap/functions";
@import "bootstrap/variables";
@import "bootstrap/mixins";
@import "bootstrap/root";
@import "bootstrap/reboot";
@import "bootstrap/type";
@import "bootstrap/images";
@import "bootstrap/code";
@import "bootstrap/grid";
@import "bootstrap/tables";
@import "bootstrap/forms";
@import "bootstrap/buttons";
@import "bootstrap/transitions";
@import "bootstrap/dropdown";
@import "bootstrap/button-group";
@import "bootstrap/input-group";
@import "bootstrap/custom-forms";
@import "bootstrap/nav";
@import "bootstrap/navbar";
@import "bootstrap/card";
@import "base/variables";

//default.scss
@import "shared.scss"

//rtl.scss
@import "shared.scss"
@import "base/directional";

然后你可以像这样在你的 react 应用中导入它们

if (RTL) {
  require('rtl.scss')
} else {
  require('default.scss')
}

参考这个答案 React RTL. Conditional Import CSS

Answer 2

我最终使用extract-text-webpack-plugin npm 包创建了两个不同的 CSS 文件。

      {
        test: /style\/.*\.scss$/,
        use: styleCss.extract({
          use: ['css-loader', 'sass-loader']
        })
      },
      {
        test: /app-rtl\/.*\.scss$/,
        use: styleRtlCss.extract({
          use: ['css-loader', 'sass-loader']
        })
      },
      {
        test: /commonStyle\/.*\.scss$/,
        use: ['css-loader', 'sass-loader']
      },

然后根据目录的值加载其中一种样式

Routers.js

class Routes extends Component {
constructor(props) {
    super(props);

    this.state = {
        stylePath: loadStyle(props.direction)
    }
    const defaultLanguage = props.customer.defaultLang || LOCAL_LANGUAGES[0].code;

    props.InitializeDefaultLang(defaultLanguage);
    props.getVehicles();
    props.getCountriesOnly(defaultLanguage);
    props.changeDefaultDirection(defaultLanguage);
}
componentDidUpdate = (prevProps, prevState) => {
    if (prevProps.direction !== this.props.direction) {
      this.setState({
        stylePath: loadStyle(this.props.direction)
      })
    }
  }

return (
     <div>
       <link rel="stylesheet" type="text/css" href={this.state.stylePath} />
     </div>
 )

config.js

export default function loadStyle(direction) {

  if (direction === 'ltr') {
    return '/style.css';

  } else {
    return '/style-rtl.css';
  }
}

如果有人遇到同样的问题，希望这会有所帮助。这里唯一的问题是切换样式需要很长时间。

我将离开它并改用 Node