如何在React Create-React-APP中使用LESS预处理器

Question

我想在我的create-react-app中使用LESS预处理器.

React Code
ReactDOM.render(
    <form>
        <input type="email" data-info="Enter Email" pattern="/\S+@\S+\.\S+/" required title="Please enter value" required="required"/>
        <input type="submit"/>      
    </form>
    ,document.getElementById('root'))

index.less

body{
  background: red;
}

Answer 1

这是我这样做的方式

您应该使用 node-sass-chokidar npm 包：

npm install node-sass-chokidar --save-dev

然后将以下内容添加到 package.json 中的 npm 脚本中：

"build-css": "node-sass-chokidar src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive"

观察者将在 src 子目录中找到每个 Sass 文件，并在其旁边创建相应的 CSS 文件。

请记住从源代码管理中删除所有 css 文件并将 src/**/*.css 添加到 .gitignore。

最后，您可能希望使用 npm start 自动运行 watch-css ，并将 build-css 作为 npm run build 的一部分运行。为此，请安装以下 npm 包以便能够顺序执行两个脚本：

npm install --save-dev npm-run-all

然后将 package.json 文件中的 npm start 和 build 脚本更改为以下内容：

   "scripts": {
     "build-css": "node-sass-chokidar src/ -o src/",
     "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive"
    "start-js": "react-scripts start",
    "start": "npm-run-all -p watch-css start-js",
    "build": "npm run build-css && react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   }

有关更多信息，请参阅此链接：https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-css-preprocessor-sass-less -ETC