创建反应应用程序：sass 不能很好地识别答案

【问题标题】：create react app: sass not recognized well创建反应应用程序：sass 不能很好地识别
【发布时间】：2021-01-16 05:41:53
【问题描述】：

我正在使用 typescript 和 sass 预处理器创建一个反应应用程序，如下所示：

// Button.tsx
import React from 'react';
import './Button.scss';

export default class Button extends React.Component {
    handleClick(event : React.MouseEvent<HTMLButtonElement, MouseEvent>) {
        alert("awesome");
    }
    
    render() {
        return (
            <button type="button" className="btn" onClick={this.handleClick}>Click me</button>
        );
    }
}

Button.scss：

@use "./Base" as base;

.btn {
    color: #{base.$color};
    background-color: base.$color;
}

和 Base.scss：

$color: red;

但产生如下错误：

Failed to compile.

./src/Button.scss (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-6-3!./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-6-4!./src/Button.scss)
SassError: Invalid CSS after "    color: #{base": expected expression (e.g. 1px, bold), was ".$color};"
        on line 4 of D:\web\test-react-app\src\Button.scss
>>     color: #{base.$color};
   -----------------^

react-scripts 似乎无法编译新的 sass 语法，如 @use、@forward 等。我不能使用@import，因为基础将与其他组件共享，因此多次调用@import 会导致Base.scss 多次呈现。

谁能解决我上面的问题？

【问题讨论】：

首先，确保你已经正确安装了“node-sass”包。
为什么不在 Button.scss 中使用 $color:red？？
实际上我创建了一个相互链接的 sass 库。有 button.css、control.css、colors.css、typography.css 等。它们被分组为模块，所以我可以将这些代码重用于其他项目
另一种选择 ...使用 name.module.css ... Module.css 使用 classNames ...因此您的导入不会多次呈现

标签： reactjs typescript sass

【解决方案1】：

更新：

在谷歌搜索数小时后，我找到了解决方案。我安装了npm i sass 而不是nmp i node-sass。现在 react 应用支持新的 sass 语法。

【讨论】：