create react app: sass not recognized well

Question

i'm creating a react app using typescript & sass preprocessor like this:

// 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>
        );
    }
}

the Button.scss:

@use "./Base" as base;

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

and the Base.scss:

$color: red;

but producting an error like this:

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};
   -----------------^

It seem the react-scripts cannot compile a new sass syntax like @use, @forward, etc. I cannot use @import because the base would be shared with another components, so calling @import multiple times resulting Base.scss rendered multiple times.

Anyone can solve my problem above?

First of all ,make sure you had installed "node-sass" package correctly. — Nihal Chandwani
actually i created a sass library that links each another. there are button.css, control.css, colors.css, typography.css, etc. they are grouped as module, so i can reuse these code for another projects — Heyyy Marco
Another option ...go with name.module.css ..... Module.css use classNames ... So your imports won't render multiple times — Nihal Chandwani

Heyyy Marco Heyyy Marco · Accepted Answer · 2021-01-17T10:18:48

update:

After googling for hours for solution, i've got solution. I installed npm i sass instead of nmp i node-sass. Now the react app supports new sass syntax.

create react app: sass not recognized well

1 Answers