当sass文件被导入时，我使用browserify转换我的代码，现在出现错误
@导入解析错误
有人能帮我解决这个问题吗？如何使用和集成
使用最新版本的create-react-app，您不必弹出react应用程序来添加sass支持。
只需将node-sass添加到您的项目中即可：
NPM:npm install node-sass --save
纱线yarn add node-sass
现在，您可以在react组件中导入sass文件。查看此处的官方文档
最近，React团队和许多贡献者发布了一个很棒的工具，用于基于一组最基本的想法创建无配置的React应用程序，帮助初学者深入构建React应用，而不必担心初学者可能会感到畏惧的工具。
有两种方法可以将SASS或SCSS添加到create-react-app项目中。
安装方式：NPM脚本
这种方法更简单，并且可以在不弹出项目的情况下工作。如果您不想弹出，请使用此方法。单击此处查看该项目的官方指南，了解如何使用NPM脚本安装Sass或Scss。
安装方式：Webpack
这种方法没有那么简单，但更具可扩展性和自动化。不幸的是，这种方法需要弹射。弹出一个项目，尽管在许多高级情况下很有用，但这意味着create-react-app的未来更新对您来说并不容易。
在开始之前，通过在项目目录中运行以下命令之一，从您选择的打包程序中安装并保存必要的工具。
纱线：yarn add sass-loader node-sass --dev
NPM:npm install sass-loader node-sass --save-dev
将sass或scss添加到创建react应用程序项目中首先需要弹出，这可以通过在项目的基本目录中执行以下命令来完成。
npm run eject
弹出完成后，找到包含两个webpack配置文件的config文件夹。这些配置文件中的每一个都对应于不同的环境—开发或生产。输入开发配置文件webpack.config.dev.js，并在modules块中找到loaders块。
在webpack中，加载程序允许开发人员在需要/加载文件时对其进行"预处理"。Create react应用程序使用多个加载程序来处理各种构建任务，如使用babel进行transpiling、使用PostCSS进行前缀或允许导入资产。要将Sass或Scss添加到该项目中，您将添加一个可以处理Sass和Scss文件的加载程序。
在进行任何修改之前，loaders块的开头应该类似于以下代码(在CRA的未来版本中，Exact代码可能会更改)。
loaders: [
// Process JS with Babel.
{
test: /.js$/,
include: paths.appSrc,
loader: 'babel',
query: require('./babel.dev')
},
...
在loaders数组开始之后，您可以为Sass和Scss添加自己的loader。下面代码中loaders数组中的"sass"loader能够处理sass和Scss文件。
如果您喜欢SASS，可以添加：
{
test: /.sass$/,
include: paths.appSrc,
loaders: ["style", "css", "sass"]
},
如果您喜欢SCSS，可以添加：
{
test: /.scss$/,
include: paths.appSrc,
loaders: ["style", "css", "sass"]
},
重要信息：在create-react应用程序的较新版本中，如果您在webpack配置中看到exclude阵列，则需要向添加以下行
/.sass$/,
/.scss$/,
既然Sass和Scss加载程序已经就位，您就可以开始使用Sass/Scss文件了。例如，在create-rect应用程序附带的默认App.js组件中，您现在可以编写
import './App.sass'; // or `.scss` if you chose scss
注意，您还必须将"App.css"文件重构为Sass，并将其文件名更改为"App.Sass".
参考资料取自本网站。
如果我们使用create-react-app来使用sass，那么您只需要安装node-sass-npm包。不需要任何加载程序或babel配置。创建react应用程序将为您处理此问题。
如果我们使用最新版本的react和react脚本>2.0.0无需弹出。scs文件将默认加载
注意：此功能可用于react-scripts@2.0.0以及更高。
2022年，节点sass已被弃用，最好的方法是比节点sass更快、更容易使用：https://www.npmjs.com/package/sass
安装：
npm install sass or yarn add sass
用法：
import "./styles/styles.scss";
它会自动将你的sass编译成css，并将其加载到你的项目中。
我使用的是"scss"文件，在将其导入组件时遇到了问题。
这是我找到的解决方案。
步骤1：更新typeings.d.ts(我使用的是TSX文件)。并在根级添加以下代码
declare module '*.scss';
步骤2：在组件(例如：TodoComponent.tsx)文件中导入扩展名为scs的文件
import styles from "./score-widget.component.scss";
步骤3：在返回语句中添加样式
import * as React from "react";
import { IScoreWidget } from "../models/score-widget-model";
import styles from "./score-widget.component.scss";
function ScoreWidget(props) {
const css = styles; //storing styles in const
return (
<React.Fragment>
<style>{css}</style> //added css in code
<div className="score-prop-container">
<!--Your component logic goes here-->
</div>
</React.Fragment>
);
}
export default ScoreWidget;
简单：
将scs文件名创建为
index.module.scss
并导入.tsx作为
import styles from "./index.module.scss"