Option for CSS Modules + Preprocessor

[iansoper]

I would like an option that would allow you to use CSS Modules + LESS/SASS preprocessor. The loader example is shown here on the react-css-modules repo.
https://github.com/gajus/react-css-modules#sass-scss-less-and-other-css-preprocessors

[kitze]

@iansoper this will be implemented soon.

[DarrylD]

Is this still on the roadmap to be implemented?

[lewisdiamond]

There's already a pull request for it

[sanfilippopablo]

Any news on this?

[lewisdiamond]

#35

[sompylasar]

@kitze So, what's the status on this? The PR #35 was closed unmerged. We could really make use of the way it was implemented, with _MODULES variables. Which is the way to use SCSS with modules now?

[lewisdiamond]

@sompylasar You can use this: https://github.com/lewisdiamond/create-react-app/tree/v1.0.1c/packages/react-scripts
I don't guarantee any timely updates on that repo.
Basically remove the current react-scripts from your project and add [email protected], then create a config directory and add webpack.custom.{dev|prod}.js and modify what you need from the webpack config.

There's an example in the link I provided.

[sompylasar]

@lewisdiamond Thanks. I ended up using https://www.npmjs.com/package/custom-react-scripts-with-modules

[lewisdiamond]

@sompylasar that one is outdated though

[sompylasar]

@lewisdiamond Where can I find the sources for https://www.npmjs.com/package/custom-react-scripts-with-modules ? I like the simplicity of "env" variables for commonly used features and not dealing with webpack configs (otherwise how is create-react-app different from a hand-rolled webpack config?), so I'd like to fork it and update with the latest upstream fixes such as https://github.com/facebookincubator/create-react-app/pull/2382/files

Why have you decided to go the webpack config route?

[lewisdiamond]

@sompylasar the source was removed. But it's essentially this pull request: #35

I went for the webpack config route to minimize the changes vs CRA and make it easier to pull upstream changes. It really doesn't have to be any different from using the env file. It's only a function that gets an object and returns an object.

https://github.com/lewisdiamond/create-react-app/tree/v1.0.7c/packages/react-scripts Just copy the config-helpers and use that. It could be integrated in, but CRA will likely come up with solutions to this soon so I don't want to spend too much time on that.

[sompylasar]

That's unfortunate...

It really doesn't have to be any different from using the env file. It's only a function that gets an object and returns an object.

Well, one or two lines with flags is different than a function and helpers that I need to copy to every project I bootstrap.

Just copy the config-helpers and use that.

This is exactly what I'm trying to avoid. This doesn't scale.

[lewisdiamond]

@sompylasar make your fork of it and just copy the config helpers in the react-scripts package. It doesn't have to be done for every project. You can also send me a pull request with the config helpers integrated and add a function that adds css modules support. Like I said, I don't want to spend too much time on that since CRA will add support for these things soon. It will probably be JSS.

[sompylasar]

@lewisdiamond Thanks. I just didn't want to have / make yet another custom react scripts package in the npm; the "custom" one (not "customizable") with env vars and modules served the best, except it's not up to date and doesn't support typescript (for that there is separate which doesn't support everything else). How can we revive it for the sake of zero-config flag-based features? Maybe you could transfer ownership on npm to me if you're not willing to support it...

[lewisdiamond]

It can be "zero-config" without being strictly flag-based in the env file.

import {addCssModules, addTypeScript, addWhateverElse} from 'customizable-react-scripts/helpers'

export default function(config) {
   addCssModules(config)
   addTypescript(config)
   addWhateverElse(config)
}

The user interface of customizable-react-scripts/helpers is just more basic right now.

You can also fork this repo and add your changes.

[sompylasar]

That looks better, as long as the "helpers" are in a published maintained module like yours, not copy-pasted into each of the bootstrapped projects from a README.

[lewisdiamond]

@sompylasar Like I said before, I don't have time to deal with that. You can send me a pull request that integrates them in and I'll merge.

My fork wasn't meant to be a general use one, I just posted it to help out. CRA will integrate a better solution directly in their repo soon enough.

[sompylasar]

@lewisdiamond Got it, thanks for your support!

[sompylasar]

Related:

• Plugin system facebook/create-react-app#2784 Plugin system (PR)
• Proposal: Merge Webpack configs facebook/create-react-app#2525 Proposal: Merge Webpack configs
• Optional Sass support - Part 2 facebook/create-react-app#2498 Optional Sass support - Part 2
• Add support for CSS Modules with explicit filename facebook/create-react-app#2278 Add support for CSS Modules with explicit filename + Add support for CSS Modules with explicit filename - [name].module.css facebook/create-react-app#2285 Add support for CSS Modules with explicit filename - [name].module.css (PR)

[kitze]

I have finally added this in the latest version. You can have any combination of modules + preprocessor by adding module before the file extension. For example: header.module.css or footer.module.less.

Let me know if it works okay 👌