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 Config文件，但FB的原始版本没有。因此，我不确定我需要做些什么才能将少量添加到我的项目中。

例如，原始版本在App.js文件中有import './App.css';，但是我应该这样做＃34; App.less＆＃34;用更少的工作或是否需要某种需求声明？

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

（我想我会尝试从CSS开始，因为它已经有效，然后转移到更少的时间......）但我需要与Less一起工作，因此我很乐意开始使用它

P.S。实际上，了解文件应该以最简单的形式呈现的方式对我有帮助。

又名： 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

Answer 2

加入@ Shammoo的回答。

您需要安装yarn add node-less-chokidar和yarn add npm-run-all，或者如果您使用的是NPM，npm i node-less-chokidar和npm i npm-run-all。
使用@ Shammoo的回答添加到.gitignore文件：src/**/*.css src/**/*.map
添加脚本。

我的脚本有点不同，因为我没有从Create-react-app中弹出：

  "start": "npm run build-css && run-p -ncr watch-css start-js",
  "start-js": "react-scripts start",

  "build": "run-s -n build-css build-js",
  "build-js": "react-scripts build",

  "test": "run-s -n build-css test-js",
  "test-js": "react-scripts test --env=jsdom",

  "build-css": "node-less-chokidar src",
  "watch-css": "node-less-chokidar src --watch"

将css文件导入组件：import './index.css';。您可以执行.css，因为脚本会将较少的文件转换为css。
少用！导入文件：@import "./logo.less";，制作嵌套CSS等

如何将.less纳入React项目？

2 个答案: