5

我关注了这篇文章如何在我的 React 组件中使用 SCSS 变量，或者这个React 和 SCSS 从 scss 导出一个变量以做出反应以在我的反应应用程序中获取 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,
        },
4

2 回答 2

13

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

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

  • 要么使用 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' ],
      },
于 2021-02-09T13:33:40.247 回答
0

我会说尝试像这样使用

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

希望这对你有用。

于 2021-03-25T11:38:45.523 回答