本教程操作环境：windows10系统、react16.14.0版，该方法适用于所有品牌电脑。

React 中使用sass

安装依赖sass-loader和node-sass

npm install node-sass@4.14.1 sass-loader

若安装5以上版本会报错Error: Node Sass version 5.0.0 is incompatible with ^4.0.0.

解决：先卸载已安装版本npm uninstall node-sass，再npm install node-sass@4.14.1

配置webpack.config.js

路径：my-app\node_modules\react-scripts\config\webpack.config.js

{
loader: require.resolve('file-loader'),
   exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
   options: {
     name: 'static/media/[name].[hash:8].[ext]',
   },
 },
 //以下为新增内容
 {
   test: /\.scss$/,
   loaders: ['style-loader', 'css-loader', 'sass-loader']
 }

配置完成可以使用

使用scss

可以在src下使用scss

在components中新建一个btn目录，里面所放的组件是用sass写的样式。

btn.js文件：

import React, { Component } from 'react';
import './btn.scss'
 
export default class BtnCommon extends Component{
    constructor(props) {
        super(props)
 
    }
    componentWillMount() {
 
    }
 
    render() {
        return (
            <div className="btn-common">
              <button>这是btn组件</button>
            </div>
        )
    }
}

btn.scss文件：

.btn-common {
  //border: 1px red solid;
  button {
    border: none;
    background: none;
    outline: none;
    border: 1px red solid;
  }
}

在其他组件中引入btn组件。

启动项目（npm start）可以发现样式已经可以使用了。

ps作者使用的版本

   "node-sass": "^4.14.1",
    "qs": "^6.9.4",
    "react": "^16.14.0",
    "react-dom": "^16.14.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.3",
    "sass-loader": "^10.0.5"