Javascript 创建React应用程序如何从目录导入所有SCSS文件？

我正在尝试使用createreact应用程序将RubyonRails应用程序移植到Node.js，但我在预处理指定目录中的.scss文件时遇到了一些困难。我有这样一个结构：src/css/styles.scss和src/css/app/目录，其中包含一些自定义的scss文件。所有导入都在styles.scs内。这是：

@import 'customvars';
@import 'tooltipster-sideTip-punk.min';
@import 'tooltipster.bundle.min';
@import "./app/*";

我安装了节点sass chokidar，因此SCS处理得很好，但一旦它进入目录（在本例中为应用程序），我会收到以下错误：

{“状态”：1，“文件”： “D:/Dropbox/WebStorm/project_incognito/src/css/styles.scss”，“line”： 4，“列”：1，“消息”：“未找到要导入的文件或 不可读：./app/\n租金样式表： D:/Dropbox/WebStorm/project_incognito/src/css/styles.scss“，
“格式化”：“错误：找不到要导入的文件或文件不可读： ./app/\n父样式表： D:/Dropbox/WebStorm/project\u incognito/src/css/styles.scss\n打开 src/c ss/styles.scss的第4行\n>>@import\“/app/*\”；\n^\n“}

我在谷歌上搜索了一下，找到了这个解决方案：

但我就是不知道如何配置它。文件说它可以用两种方式。第一个是添加如下模块：

{
  module: {
    preloaders: [{
      test: /\.scss/,
      loader: 'import-glob-loader'
    }]
  }
}

但是我必须在哪里添加这个呢？我试图将其添加到react scripts/config/webpack.config.dev.js 但是，一旦我尝试添加一些东西，WebStorm就会说“这个文件不属于这个项目”

第二种方法是：

require('style!css!sass!import-glob!foo/bar.scss')

我也不清楚。我必须在哪里添加这样的行

我是否必须以某种方式覆盖webpack.config.js并安装类似的东西？

---

添加这样的模块的正确方法是什么？

create react app有自己的css预处理器实现

您是否为webpack提供了style/css/sass加载程序插件？这实际上可能是导入glob loader的一个很好的替代方案。在哪里包含它们？怎么做？到目前为止，我为scss所做的只是安装了节点sass chokidar并修改了我的package.json文件的脚本部分，如：

“scripts”：{“build css”：“node sass chokidar src/-o src/”，“watch css”：“npm run build css&&node sass chokidar src/-o src/-o src/-watch--recursive”，“start js”：“react scripts start”，“start”：“npm run all-p watch css start js”，“build”：“npm run build css&&react scripts build”，“eject”：“react scripts eject”}

好的，再仔细检查一下，你在使用webpack吗？@TinusWagner他是，它是

创建react应用程序

所以，是的。我正在使用创建react应用程序解决方案。正如我所看到的，它包括webpack。但我还不确定什么，因为这是我使用react的第二天，所有东西对我来说都是新的（除了javascript本身）请仔细阅读我的问题。我知道这一点，我已经安装了它。问题是它无法从一个目录中读取所有scss文件。糟糕，你是否已经

npm运行eject

来查看你的

webpack配置

？不，我没有弹出该应用程序。实际上，我想避免弹出。这是必须的吗？嗯，我想我这是覆盖

网页配置的唯一方法。