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

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.

[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”

[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?