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