Add less as an allowed cssExtension when extending create-react-app configurations

[gustavnikolaj]

Is your feature request related to a problem? Please describe.
I'm trying to integrate the storybook into a project at work. We're running a fork of create-react-apps react-scripts package, to build the application. @storybook/react is ALMOST able to pick up on it automatically and without requiring any custom configuration - except that it breaks its neck on the .less files.

Describe the solution you'd like
https://github.com/storybooks/storybook/blob/11d9a10f33a92d405ce63231beb28f9b46194ee6/app/react/src/server/cra-config.js#L12

Adding '.less' to the cssExtensions-array makes it work.

Describe alternatives you've considered
Until this is fixed I have to manually override the configuration with a custom .storybook/webpack.config.js file. It works, and I'm used to that from other projects, I just think this is such a low hanging fruit that it would be a pity not to add it to the list.

Are you able to assist bring the feature to reality?
Sure. But since the amount of work needed here is so small, I think it might be easier for something familiar with the project.

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[mrmckeb]

Hi @gustavnikolaj, this is not supported by Create React App, so if you're using a custom configuration alongside CRA, you'll need to modify your local configuration.

The goal of the CRA preset is that it should offer the same support as CRA, we don't want a situation where things work in Storybook, but not in CRA (by default).

[mrmckeb]

What you'll need to do, is to follow the steps here, and add a rule that handles .less.

If we simply support the extension, you'll have build failures as there won't be a loader for LESS (or less as I think it's now known).

[gustavnikolaj]

@mrmckeb This PR added support for forks of react-scripts and their associated configurations to be picked up. #5801

Following the reasoning laid out in your comments that suggestion should have been rejected as well. This strikes me as being a bit inconsistent.

I'm perfectly aware of how both CRA, react-scripts and the storybook works, and I was excited to see that you decided to add support for react-scripts compatible forks. Adding .less to the list of supported css-extensions should be entirely safe; they are only used to filter out rules of the webpack configuration that was picked up from the react-scripts package. This means that it will only ever make a difference when the resolved webpack configuration has a loader that handles .less files.

[gustavnikolaj]

Pinging @shilman for a second opinion :-)

[mrmckeb]

Hi @gustavnikolaj, that PR fixed support for custom react-scripts packages, we added support for those last year. What that PR doesn't do, is allow Storybook users to accidentally implement things in Storybook that won't work with CRA - at least not without creating a custom config.

What you're asking would do that, which is why I am suggesting you simply add this to the config yourself. Storybook is a highly configurable tool, and the team do a great job of keeping it that way - the custom Webpack config is a huge part of that story :)

What would be ideal, is if we could load that list of extensions from react-scripts. Perhaps you could raise a PR for that if you're interested?

[shilman]

I think we should handle less via a preset, like preset-typescript, and not spend time on CRA forks unless we get it "for free"