reactjs - 如何将 .less 合并到 React 项目中？

Question

首先，我使用预制的 React 版本:https://github.com/facebookincubator/create-react-app#create-react-app-

到目前为止一切都很好。我正在尝试将 LESS 连接到该应用程序。我已按照此处的说明进行操作:http://jamesknelson.com/webpack-made-simple-build-es6-less-with-autorefresh-in-26-lines/

但是我对此很陌生，并且有太多新文件让我无法真正理解。该示例有一个 Webpack 配置文件，但 FB 的原始构建没有。因此，我不太确定需要做什么才能将 less 添加到我的项目中。

例如，原始版本在 App.js 文件中有 import './App.css'; ，但是我应该让这个“App.less”与 less 一起使用还是我应该这样做需要某种 require 语句吗？

请列出需要存在/编辑的所有文件，以便我实现这一目标。

(我想我会尝试从 CSS 开始，因为它已经可以工作了，然后再转向 less...)但是我需要使用 Less 来完成我的工作，所以我很乐意从它开始.

附注实际上，了解文件最简单的形式应该是什么样子对我很有帮助。

又名:index.html - 此处是否有某些结构，或者应该将其全部编写为我的 App.js 文件中的 JSX？

Answer 1

我必须自己做这件事。按照 create-web-app documentation 中的说明进行操作。使用 node-less-chokidar 包进行修改似乎工作正常。

我的 package.json 构建命令看起来像

"build-css": "node-less-chokidar src/ src/",
"watch-css": "node-less-chokidar src/ src/ --watch",
"start-js": "node scripts/start.js",
"start": "npm-run-all -p watch-css start-js",
"build": "npm run build-css && node scripts/build.js",

我必须添加到我的 .gitignore

# css preprocessing
src/**/*.css
src/**/*.map