Question

我正在尝试使用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处理得很好但是一旦到达目录（在这种情况下为应用程序），我就会收到此错误：

{“status”：1，“file”：   “D：/Dropbox/WebStorm/project_incognito/src/css/styles.scss”，“line”：   4，“列”：1，“消息”：“未找到导入的文件或   不可读：./ app / 。\ nParent样式表：   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 \ n＆gt;＆gt;的第4行@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的内容？添加类似模块的正确方法是什么？

Answer 1

create-react-app有自己的css预处理器实现。 Here's the link for their documentation

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

1 个答案: