时间戳

首页 > 解决方案 > 创建反应应用程序：sass 不能很好地识别

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

问题描述

我正在使用 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渲染。

任何人都可以解决我上面的问题吗？

标签： reactjstypescriptsass

解决方案

更新：

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

推荐阅读