Reactjs 使用未加载样式的sass创建react应用程序

我正在尝试将sass/scss支持添加到

所以我做了以下步骤：

npm弹出

npm安装sass加载程序节点sass——保存开发

选择webpack.config.dev.js文件并将其添加到loaders部分：

{
    test: /\.scss$/,
    loaders: ["style", "css", "sass"]
},

在我的app.js文件中，我引用了一个scss文件：

import./css/app.scss'

当我运行
npm start
时，一切编译都没有错误，但应用程序加载时没有样式

我错过了什么？
我刚刚经历了这个问题，似乎有很多人迷失了方向或者没有找到正确的答案。这就是我所做的：

获得对配置的控制权
npm运行弹出

运行此命令将把所有配置文件和可传递的依赖项（Webpack、Babel、ESLint等）复制到您的项目中，正如您注意到的，所有这些都位于名为react script的npm模块中。请勿直接修改此软件包

安装sass编译器和网页包加载器
npm安装sass加载程序节点sass——保存开发

此时，您必须将sass编译器和Web包加载程序作为开发依赖项安装

修改网页包配置
打开
config\webpack.config.dev.js
将
/\.scss$/，
添加到url加载器中的排除数组中，更新后的结果如下：

exclude: [
    /\.html$/,
    /\.(js|jsx)$/,
    /\.css$/,
    /\.json$/,
    /\.svg$/,
    /\.scss$/, //Add this line
],


添加SASS/SCSS加载程序：

{
    test: /\.scss$/,
    loaders: ['style', 'css', 'sass']
},



{
测试：/\.scss$/,，
加载程序：['style'，'css'，'sass'，'scss']//添加'scss'
}，
在不弹出的情况下使用Sass设置样式
1） 安装考拉
是一种时髦，少等等。。编译器。为此，您可以使用您选择的任何工具

2） 添加您的src文件夹
将包含所有SCSS文件的源文件夹添加到考拉。它将监视对Sass文件的任何修改，并立即生成已编译的CSS版本

3） 参考CSS文件
直接在项目中使用考拉生成的CSS文件

import './style.css';

第1步：

npm run eject

现在，配置文件将显示在项目文件夹中

第二步：
安装sass编译器和网页包加载器

npm install sass-loader node-sass --save-dev

在config\webpack.config.dev.js中
将/.scss$/添加到排除数组中

第三步：
在规则数组中添加以下加载程序（应在文件加载程序之前添加）

然后启动您的应用程序

您可以将现有css文件重命名为SCS，然后继续工作
我在读取它时遇到了同样的问题

Unitl我发现使用create react app创建的项目中的README.md文件以另一种方式对其进行了记录，并且它起到了作用。我认为依赖自述文件（与您创建的项目一起提供）是更好的选择。
您错过了
include:path.appSrc
@原因-我尝试了使用它和不使用它，都没有帮助。您是否遵循并添加了一行到
排除
？@DanAbramov-谢谢Dan，它成功了！你把它写下来作为一个答案，这样我就可以把它标记为真的了。这个问题来自于使用
node sass chokidar
的较旧版本的
react scripts
。通过删除旧的自动生成的
.css
文件并卸载
节点sass chokidar
和
npm run all
，我可以让它正常工作。之后，我运行了
npm安装sass加载程序节点sass--save dev
。然后，我运行了
npmstart
，它在控制台中输出文件路径错误，我可以使用。然后，一切都很好。@BrunoQuaresma，也许如果你能分享一个更详细的解释，我可以帮你：）我重新设置了文件，再次按照说明进行操作，它成功了。谢谢您可以在开发时添加sourceMap支持：
加载程序：['style'、'css？sourceMap'、'postss'、'sass？sourceMap']
这使得在标记和构建中加载sass文件根本不包括样式。现代官方解决方案：
  {
            test: /\.scss$/,
            loaders: [
              require.resolve('style-loader'),
              require.resolve('css-loader'),
              require.resolve('sass-loader')
            ]
  }