如何让 SCSS 变量做出react

IT技术 node.js reactjs sass icss
2021-04-07 22:19:11

我关注了这篇文章How to use SCSS variables into my React components or this one React and SCSS export a variable from scss to react to get scss variable in my react app 但它不起作用。
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是一个空对象。

（react版本：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,
        },
2个回答

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

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

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

可以在此处找到带有示例的博客文章：https : //til.hashrocket.com/posts/sxbrscjuqu-share-scss-variables-with-javascript （请注意，该博客文章没有提到 css module必须是用过的。）

$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' ],
      },
问题仅在于文件名：variables.module.scss因为 css-loader 默认规则:/\.module\.\w+$/i.test(filename)（与其他帖子中的问题相同）。您介意编辑您的答案并添加这一点吗？
2021-05-24 22:19:11
谢谢你的回答。我编辑了我的帖子并添加了 webpack.config.js
2021-06-05 22:19:11
@Stef1611 我在答案中添加了 css module问题
2021-06-11 22:19:11

我会说尝试像这样使用

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

希望这对你有用。

其它你可能感兴趣的问题
上一篇如何在 MUI v5 sx prop 中实现条件样式 下一篇Karma 单元测试：尚未为上下文加载module名称“react”：_。使用 require([])