如何让 SCSS 变量做出反应

Question

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

Answer 1

这是 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视为模块的文件，因为此语法是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' ],
      },