我想在我的 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;
}
【问题讨论】：
标签： css reactjs less create-react-app
这是我的做法
你应该使用 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"
watcher 会在 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"
}
【讨论】：
使用 create-react-app 2，您可以使用“Create React App Configuration Override”（craco）和 craco-less 来配置它：
设置 craco：
npm install @craco/craco
在 package.json 中：
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "craco eject"
},
以更少的成本设置 craco：
npm install craco-less
创建新文件：craco.config.js
module.exports = {
plugins: [
{
plugin: require('craco-less'),
},
],
};
【讨论】：
到目前为止，为 reactjs 应用程序添加较少支持的最简单且轻松的方法是使用 custom-react-scripts 和 create-react-app 来获得 LESS/SASS/decorators 支持：
安装：npm install -g create-react-app custom-react-scripts
创建应用程序：
create-react-app <app_name> —scripts-version custom-react-scripts
少文件示例：
.myDiv{ background: gray; }
然后在你的组件中：
import lessStyles from '<less file path>';
<div style={lessStyles.myDiv}>
...
</div>
或常规方式：
import '<less file path>';
<div className="myDiv">
...
</div>
供参考：
【讨论】：
我也遇到过类似的问题。 只需将以下几行添加到您的 webpack 配置规则部分 (taken from the official less loader examples)：
{
test: /\.less$/,
use: [{
loader: 'style-loader' // creates style nodes from JS strings
}, {
loader: 'css-loader' // translates CSS into CommonJS
}, {
loader: 'less-loader' // compiles Less to CSS
}]
},
当然，你需要在你的 package.json 中添加相应的包
然后在您的代码中简单地导入所需的样式
import './style.less'
使用这种方法，您不会引入创建额外 css 文件的额外步骤。
【讨论】：