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

Posted 2023-02-22

【中文标题】根据文本方向属性提供不同的 SCSS 文件

【英文标题】：Serve a different SCSS file based on the text direction property

【发布时间】：2019-06-09 14:34:55

【问题描述】：

我只有两个 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'),
            ]
          ,

【问题讨论】：

@isherwood 感谢您的快速回复，这几乎是文本方向。例如，默认情况下，它是从左到右 (ltr)。如果是 rtl，那么 html 中的所有内容都将从右到左呈现。 w3schools.com/tags/att_global_dir.asp

这通常通过一个不同的指标来完成，比如一个 url 参数而不是一个 DOM 属性。我认为它更容易实现（在服务器端和客户端）

我明白什么是文本方向。我不清楚您要检查什么以确定 RTL 状态。考试内容是什么？

【参考方案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

【讨论】：

你在哪里检查 RTL 布尔值？

我认为它是用户提供的值，或者我的意思是你总是可以使用 getComputedStyle 或其他东西来将值设置为默认值。

@JoeWarner 感谢您的回复。对不起，要回家了。我得试一试，然后告诉你。问题是我正在使用 Webpack，不完全确定如何编译 2 个 SCSS 文件并只使用一个。这就是我的意思：我的index.js 文件import '../scss/app.scss'; // 这就是我获取ltr 样式表的方式。您向我展示的内容让我对如何解决这个问题有了一个很好的了解

哦，好吧，那么是的，您问了几个问题，然后我会尽快尝试编辑我的答案，因为我认为您需要了解几个步骤才能掌握这一点

谢谢@JoeWarner。我刚刚更新了我的问题，使其更清晰。

【参考方案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