相关疑难解决方法(0)

我关注了这篇文章如何在我的 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, …

我已经按照create-react-app 提供的文档创建了一个create-react-app项目。

1）我创建我的项目并CD进入

npx create-react-app my-app
cd my-app

2）我遵循了入门文档并安装了webpack，webpack-cli和webpack-dev-server。

npm install --save-dev webpack webpack-dev-server webpack-cli

3）考虑到需要babel，Ive还遵循了此指令中的以下步骤

npm install --save-dev @babel/core @babel/preset-env
npm install --save-dev babel-loader
npm install --save-dev @babel/preset-react

4）我还按照此说明创建了以下webpack.config.js文件

const path = require('path');

module.exports = {
  entry: './src/index.js',
  mode: 'production',
  module: {
    rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
            "presets": ["@babel/preset-env","@babel/preset-react"]        }
          }
        }
    ]
  },
  output: …