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

我想在我的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;
}

解决方法

这是我这样做的方式

你应该使用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

原文地址：https://www.jb51.cc/css/215119.html