时间戳

首页 > 解决方案 > 在 React 组件中使用全局 SASS 变量

reactjs - 在 React 组件中使用全局 SASS 变量

问题描述

JS 文件中 SCSS 文件的每次导入都被视为一个孤立的 SASS 环境，因此，在 React 中使用 SCSS 时没有“全局变量”这样的东西。这种行为要求我们将variables.scss文件导入到使用其中一个变量的每个 SCSS 文件中。

_variables.scss

$global-font : "Cairo", sans-serif;
$global-background: whitesmoke;

App.js

import './App.scss'

export function App()
{
    return (
        <div className="App"></div>
    )
}

App.scss

@import "variables.scss";

.App {
    background-color: $global-background;
    font-family: $global-font;
    // ...
}

Header.js

import './Header.scss'

export function Header()
{
    return (
        <div className="Header"></div>
    )
}

Header.scss

@import "variables.scss";

.Header {
    background-color: $global-background;
    font-family: $global-font;
    // ...
}

我必须将 _variables.scss 文件导入多个（可能 100 多个）其他 SCSS 文件以使用这些变量。这样做会增加捆绑包的大小吗？

PS 该variables.scss文件仅包含 SCSS 变量，没有其他内容。

标签： reactjssass

解决方案

如果它只是变量，那么它不会使输出膨胀，但是如果您导入的文件做得更多，那么它可能会增加您的构建输出，根据 SCSS文档

使用@import 每个样式表都会在每次@imported 时执行并发出其CSS，这会增加编译时间并产生臃肿的输出。

我建议使用css variables你的全局变量。只需在入口时加载的主样式表中声明一次


:root {
  --var-one: something;
  --var-two: something;
}

并在任何地方使用它们，

  // in stylesheets
  .someclass {
     ...
     font-size: var(--var-one);
   }

   //or even in jsx
   
   <component style={{fontSize: 'var(--var-one)'}} />

推荐阅读