Create-React-App如何导入目录中的所有SCSS文件？

我正尝试使用create-react-app将一个Ruby on Rails应用程序移植到Node.js，但是我有点卡在从指定目录中预处理.scss文件。 我有一个像这样的结构：src / css / styles.scss和src / css / app /目录，其中包含一些自定义的scss文件。 所有的input都在styles.scss里面。 他们来了：

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

我安装了node-sass-chokidar，所以scss处理得很好，但是一旦它进入一个目录（在这种情况下，应用程序），我得到这个错误：

{“status”：1，“file”：“D：/Dropbox/WebStorm/project_incognito/src/css/styles.scss”，“line”：4，“column”：1，“message”：“要导入的文件找不到或无法读取：./app/ 。\ n父级样式表：D：/Dropbox/WebStorm/project_incognito/src/css/styles.scss“，
“格式化”：“错误：要导入的文件不存在或不可读：./app/ 。\ n父types表：D：/Dropbox/WebStorm/project_incognito/src/css/styles.scss \ n在src / c ss / styles.scss \ n >> @import \“./ app / * \”; \ n ^ \ n“}

我做了一些Googlesearch，发现这个解决scheme： https : //www.npmjs.com/package/import-glob-loader

但我只是不知道如何configuration它。 文档说它可以用两种方式。 第一个是添加这样的模块：

 { 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并安装这样的https://www.npmjs.com/package/webpack-config ？ 什么是正确的方式来添加这样的模块？

Answer 1

create-react-app拥有自己的css预处理器实现。 这里是他们的文档的链接 。