【发布时间】：2017-11-22 14:13:53
【问题描述】：
我正在尝试使用 create-react-app 将 Ruby on Rails 应用程序移植到 Node.js，但我有点卡在从指定目录预处理 .scss 文件上。我有这样的结构： src/css/styles.scss 和 src/css/app/ 目录，其中包含一些自定义 scss 文件。所有的导入都在styles.scss 中。他们在这里：
@import 'customvars';
@import 'tooltipster-sideTip-punk.min';
@import 'tooltipster.bundle.min';
@import "./app/*";
我已经安装了 node-sass-chokidar，所以 scss 处理得很好，但是一旦它到达一个目录（在这种情况下是应用程序）我得到这个错误：
{ “状态”：1，“文件”： “D:/Dropbox/WebStorm/project_incognito/src/css/styles.scss”，“行”： 4、“列”：1、“消息”：“找不到要导入的文件或 不可读：./app/。\n父样式表： D:/Dropbox/WebStorm/project_incognito/src/css/styles.scss",
“格式化”：“错误：找不到要导入的文件或无法读取： ./app/.\n 父样式表： D:/Dropbox/WebStorm/project_incognito/src/css/styles.scss\n on src/c ss/styles.scss 第 4 行\n>> @import \"./app/*\";\n ^\n" }
我做了一些谷歌搜索并找到了这个解决方案： https://www.npmjs.com/package/import-glob-loader
但我就是不知道如何配置它。文档说它可以通过两种方式使用。第一个是像这样添加模块：
{
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 的东西？ 添加这样的模块的正确方法是什么？
【问题讨论】：
-
你是否包含了 webpack 的 style/css/sass 加载器插件？这实际上可能是 import-glob-loader 的一个很好的替代方案
-
在哪里包含它们？如何？到目前为止，我为 scss 所做的只是安装了 node-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/ --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 他是
create-react-app所以，是的。 -
我正在使用 Create-React-App 解决方案。如我所见，它包括 webpack。但我还不确定什么，因为这是我第二天的反应，一切对我来说都是新的（除了 javascript 本身）
标签： javascript node.js reactjs sass create-react-app