如何让 SCSS 变量做出反应答案

【问题标题】：How to get SCSS variables into react如何让 SCSS 变量做出反应
【发布时间】：2021-05-13 02:17:47
【问题描述】：

我关注了这个帖子 How to use SCSS variables into my React components 或这个帖子 React and SCSS export a variable from scss to react 在我的 react 应用程序中获取 scss 变量，但它不起作用。
myvar.scss 文件：

$color: red;

:export {
    color: $color;
}

.myclass {
  background-color: $color;
}

App.js 文件：

import variables from './myvar.scss';

const App = () => {
    console.log(variables);
    return <div className="myclass">Hello</div>
}

export default App;

div 背景是红色的，所以 myvar.scss 正在工作。但是variables 是一个空对象。

（反应版本：17.0.1）

node_modules\react-scripts\config\webpack.config.js

module: {
  strictExportPresence: true,
  rules: [
    { parser: { requireEnsure: false } },
    {
      oneOf: [
...
        {
          test: sassRegex,
          exclude: sassModuleRegex,
          use: getStyleLoaders(
            {
              importLoaders: 3,
              sourceMap: isEnvProduction
                ? shouldUseSourceMap
                : isEnvDevelopment,
            },
            'sass-loader'
          ),
          sideEffects: true,
        },

【问题讨论】：

标签： node.js reactjs sass icss

【解决方案1】：

这是一个 webpack/css-loader 功能，仅适用于 webpack 和 css-loader (https://webpack.js.org/loaders/css-loader/#separating-interoperable-css-only-and-css-module-features)

重要提示：SCSS/CSS 文件中的 :export 语法仅适用于那些被 css-loader 视为 module 的文件，因为此语法是 css module proposal 的一部分。你可以...

要么使用 css-loader 的默认行为并通过文件名触发该行为：例如foostyle.module.scss
或者您可以配置 css-loader 以将所有文件视为模块，例如loader: 'css-loader', options: { modules: true }

可以在此处找到带有示例的博文：https://til.hashrocket.com/posts/sxbrscjuqu-share-scss-variables-with-javascript （请注意，博文没有提到必须使用 css 模块这一事实。）

$white-color: #fcf5ed;

:export {
  whitecolor: $white-color;
}

和

import variables from 'variables.module.scss';

console.log(variables.whitecolor)

您的 webpack.config.js 可能会包含一个加载器链，其中 css-loader 作为最后一个或倒数第二个（按时间顺序），这应该可以工作。

module: {
    rules: [
      {
        test: /\.scss$/,
        use: [ 'style-loader', 'css-loader', 'sass-loader' ],
      },

【讨论】：

感谢您的回答。我编辑了我的帖子并添加了 webpack.config.js
问题只是文件名：variables.module.scss，因为 css-loader 默认规则:/\.module\.\w+$/i.test(filename)（与其他帖子中的问题相同）。您介意编辑您的答案并添加这一点吗？
@Stef1611 我在答案中添加了 css 模块问题

【解决方案2】：

我会说尝试像这样使用

  const App = () => {
  const [parameters, setParameters] = useState({
    fontFamily: ''
  });
  return (
    <div style={setParameters(fontFamily && { fotnType: 'font_name' })}>
      {content}
    </div>
  );
};

希望这对你有用。

【讨论】：