[搬运整理] 在 React 中使用 less（官方做法）

概述

在用 create-react-app 搭建 react app 的时候，并不支持 less。create-react-app 官网给了一种方法使用 less。

参考资料：Adding a CSS Preprocessor (Sass, Less etc.)

主要利用的库

主要利用了 node-less-chokidar 这个库。

使用方法步骤

• 首先导入 node-less-chokidar 和 npm-run-all 这两个库

在命令行里输入

npm install node-less-chokidar --save-dev
npm nstall npm-run-all --save-dev

或者使用 yarn

yarn add node-less-chokidar
yarn add npm-run-all

• 然后修改 package.json

"scripts": {
    "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"
},
"devDependencies": {
    "node-less-chokidar": "^0.3.0",
    "npm-run-all": "^4.1.3"
}

• 运行

npm start

或者

yarn start

原理说明

在执行 create-react-app 之前，就把 less 编译成 css 并放在 less 文件所在的文件夹里。在组件引用样式的时候，只需要引入 less 文件的文件名，然后将后缀 .less 改为 .css 即可。

原文链接：https://www.cnblogs.com/yangzhou33/p/9625976.html