Create-React-App how do I import all SCSS files from a directory?

Question

I'm trying to port a Ruby on Rails app to Node.js with create-react-app, but I'm a bit stuck on preprocessing .scss files from a specified directory. I have a structure like this: src/css/styles.scss and src/css/app/ directory which contains some custom scss files. All the imports are inside styles.scss. Here they are:

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

I have node-sass-chokidar installed so the scss are processed just fine but once it gets to a directory (app in this case) I get this error:

{ "status": 1, "file": "D:/Dropbox/WebStorm/project_incognito/src/css/styles.scss", "line": 4, "column": 1, "message": "File to import not found or unreadable: ./app/.\nParent style sheet: D:/Dropbox/WebStorm/project_incognito/src/css/styles.scss",
"formatted": "Error: File to import not found or unreadable: ./app/.\n Parent style sheet: D:/Dropbox/WebStorm/project_incognito/src/css/styles.scss\n on line 4 of src/c ss/styles.scss\n>> @import \"./app/*\";\n ^\n" }

I did some googling and found this solution: https://www.npmjs.com/package/import-glob-loader

But I just can't figure out how to configure it. The docs say it can be used in two ways. The first one is to add module like this:

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

But where do I have to add this? I tried to add it to react-scripts/config/webpack.config.dev.js But once I try to add something there, WebStorm says "This file does not belong to the project"

The second way is to do this:

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

Which is also unclear to me. Where do I have to add a line like this?

Do I have to override webpack.config.js in some way and install something like this https://www.npmjs.com/package/webpack-config? What is the correct way to add modules like that?

have you included style/css/sass loader plugins for webpack? That might actually be a good alternative to import-glob-loader — Tinus Wagner
where to include them? And how? All I've done for scss so far is installed node-sass-chokidar and modified my package.json file's scripts section like this: "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" } — Konstantin
I'm using Create-React-App solution. It includes webpack as I can see. But I'm not really sure about anything yet since it's my second day with react and everything is new to me (except for javascript itself) — Konstantin

ickyrr ickyrr · Accepted Answer · 2017-06-20T07:31:45

create-react-app has it's own implementation for css preprocessors. Here's the link for their documentation.

Create-React-App how do I import all SCSS files from a directory?

1 Answers