4 ms·

I’ve been able to do everything I want to with create-react-app which uses webpack internally, giving you a zero configuration experience. With async import I

I’ve been able to do everything I want to with create-react-app which uses webpack internally, giving you a zero configuration experience. With async import I am able to do code splitting. With react-intl-cra I can pull formatted messages out of my code. I had to add a grunt file to compile LESS into src, but it was easy to integrate with my package.json scripts.

moltar 9y ago
The fact that you had to add grunt, the grandfather of webpack, speaks volumes. Why didn’t you just configure wp to compile less?
- adregan 9y ago
  That has less to do with webpack and more to do with create-react-app which doesn't allow you to modify the webpack config. The gp didn't really need to use gulp, you can compile less with package.json scripts.
- shados 9y ago
  As mentioned, create-react-app doesnt let you configrue anything (ok, almost anything), and doesn't support LESS/Sass by design. Though you usually don't even need that much. Just using the node-sass or less compilers directly usually work fine. Or use something like Glamor or Styled Components to punt on the problem altogether.
epicide 9y ago
Using this should make WebPack work with LESS files. I'm no expert, but my understanding is that this says "for all files matching *.less, run them through the CSS and LESS loaders, then use the Extract Text Plugin" (which pulls things into their own file; you'll need to configure it in the plugins). {test: /\.less$/i, use: ExtractTextPlugin.extract(['css-loader', 'less-loader'])} Edit: forgot a brace.
- hungerstrike 9y ago
  Thanks! One thing - I'm not using WebPack directly and indeed, I have no access to the WebPack configuration because Create-React-App hides all of that from me. I can eject the app from Create-React-App and get a normal WebPack project, but I won't do that unless it's absolutely necessary because the huge community of Create-React-App devs are taking care of my config for me.
  - ulucs 9y ago
    create-react-app now uses some kind of extensible build scripts in form of react-scripts: webpack files which you can clone and modify and use without ejecting. here's one for less: https://www.npmjs.com/package/create-react-scripts-less https://www.npmjs.com/package/create-react-scripts-less also here are the official docs: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-css-preprocessor-sass-less-etc https://github.com/facebookincubator/create-react-app/blob/m...

moltar 9y ago

The fact that you had to add grunt, the grandfather of webpack, speaks volumes. Why didn’t you just configure wp to compile less?

adregan 9y ago
That has less to do with webpack and more to do with create-react-app which doesn't allow you to modify the webpack config. The gp didn't really need to use gulp, you can compile less with package.json scripts.
shados 9y ago
As mentioned, create-react-app doesnt let you configrue anything (ok, almost anything), and doesn't support LESS/Sass by design. Though you usually don't even need that much. Just using the node-sass or less compilers directly usually work fine. Or use something like Glamor or Styled Components to punt on the problem altogether.

epicide 9y ago

Using this should make WebPack work with LESS files. I'm no expert, but my understanding is that this says "for all files matching *.less, run them through the CSS and LESS loaders, then use the Extract Text Plugin" (which pulls things into their own file; you'll need to configure it in the plugins). {test: /\.less$/i, use: ExtractTextPlugin.extract(['css-loader', 'less-loader'])} Edit: forgot a brace.

hungerstrike 9y ago
Thanks! One thing - I'm not using WebPack directly and indeed, I have no access to the WebPack configuration because Create-React-App hides all of that from me. I can eject the app from Create-React-App and get a normal WebPack project, but I won't do that unless it's absolutely necessary because the huge community of Create-React-App devs are taking care of my config for me.
- ulucs 9y ago
  create-react-app now uses some kind of extensible build scripts in form of react-scripts: webpack files which you can clone and modify and use without ejecting. here's one for less: https://www.npmjs.com/package/create-react-scripts-less https://www.npmjs.com/package/create-react-scripts-less also here are the official docs: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-css-preprocessor-sass-less-etc https://github.com/facebookincubator/create-react-app/blob/m...