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 customizable-react-scripts@1.0.1, 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.