Why does importing LESS (.less) files fail silently and what do I do if I need to use LESS and want to use CRA? #1293
If I do this in index.js:
I am not, in fact, seeing a compile error, or any error, for that matter. The application starts, just without the LESS code in
I was affected by this issue when trying to port a medium-size React.JS application (about 1 year old), which used LESS, to create-react-app. Our motivation for attempting this were that we never could get HMR to work in the old app, making front-end development tediously slow (in CRA, it mostly works), and that we want to use the rest of CRA's webpack config, including its Babel and eslint presets, particularly with an eye towards upgrading to Webpack 2.0. In a 1 year old application, several packages are multiple semantic versions behind (react, react-bootstrap, redux, redux-forms, ... you name it), and just waiting for compile errors without incremental compilation would is aggravating.
If create-react-app is not the tool for that use case, what is? Maybe we need 'maintain-react-app' project, or a
Any files with unknown extensions are treated as wanting to add a file to the build output (with hashing). This is useful because we don't need to add file to several whitelists once somebody needs an obscure extension.
Less compilation is not supported out of the box. However you can use its CLI to compile Less files to CSS, and import the resulting CSS. Does this work for your use case?
Perhaps for the benefit of others may I share what I found to elaborate on @gaearon 's answer. Please correct if I'm wrong.
Trying to understand what is meant by "add a file to the build output," I performed some experiments. Just saying
From an SO answer I am able to infer that this is likely the result of a module call
If I understand it correctly, to be able to use less, I will need to either add a corresponding rule to the webpack config (which I can't change while staying unejected from CRA), or run it on the command line to produce CSS, which in turn will mean no automatic recompilation when I make changes.
It seems configuration of, in particular, webpack, has gotten so complicated that the need for a "convention over configuration" scaffolding like CRA arose, but then it is difficult for people to live within its confines given the judgement calls it makes on what is and isn't part of essential infrastructure.
The next issue I'm facing is that our project has some custom eslint rules (like 2-space indent, requiring semicolons), which according to my reading of issues #808 and #734 will stay outside create-react-app. So we need CRA because we're scared of touching webpack otherwise, but then we'll have to use bandaids and work-arounds to perform even mild configuration. Not a great situation. The answer is likely for webpack's complexity to come down so that when a problem occurs, we don't have to take apart the entire compiler like we did in issue #1023.
If you could submit a PR it would be great! This was mentioned in the changelog but indeed we didn't document it.
Sorry, I didn't mean that you should search for Webpack docs to understand this. My point was that if you import a module with any non-JS/CSS extension (usually people use this for images or videos), it will get added to the build output, and the result of the import will be the URL of this file. If the file is small enough it will get inlined (you'll still get a URL though). This is useful for small images.
We should probably only whitelist inlining for specific extensions (namely, images). It wouldn't make sense to attempt to inline, e.g., a PDF file. So I'll reopen this issue to revisit that decision.
Why not run a command line watcher? If I go to Less docs and search for "watcher" on the page, I find a link to a project called autoless that watches Less files. Or you could use Gulp with something like
That’s true, it’s a tough balance. On the other hand I think it’s important that we enforce some of these limitations to make ecosystem more bearable. For example it’s frustrating that some libraries force users to change Webpack configurations. This leads to accumulated config cruft over time. Since those libraries don’t work in CRA, their authors are now compelled to provide simpler ways to integrate and “play well”. I think it’s going to be a net win in the longer term.
You can add ESLint to your project just like you normally do, and specify your own config. CRA won’t use that config itself, but you are free to add your own task that runs the linter. And at some point we might revisit this (there is an issue).
Yea. CRA is “bundler on a diet”. It’s a bit more radical than most solutions but I think it helps steer the ecosystem in right direction.
I think what would be tremendously useful is for webpack to include
With such support, people wouldn't need to reverse-engineer and would need to ask fewer questions about just what this thing does with their configuration (or with a configuration provided by an intermediate layer as is CRA).