- 首先在终端中写
npm i --save-dev less less-loader
。安装less、less-loader两个包 - 在终端中写
npm run eject
,暴露webpack。 - 在项目文件夹中会出现config文件夹,其中会有webpack.config.js文件。
- 在 webpack.config.js 中 “style files regexes” (58行) 添加 less ==》即照着Sass改一份Less的
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
5.在‘sass-loader’后面添加代码
{
test: lessRegex,
exclude: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
},
'less-loader'
),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true,
},
// Adds support for CSS Modules, but using SASS
// using the extension .module.scss or .module.sass
{
test: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
},
'less-loader'
),
},
- 此时less就配置成功了,可以测验一下是否成功
- 在src文件夹下创建test.less
@themeColor: #17B3A3;
p{
background: @themeColor; //使用Less或者Sass是注意结束的 ;
span{
color: #fcc;
}
}
- 在App.js中引入使用
import React from 'react';
import './test.less'
function App() {
return (
<div className="App">
<header className="App-header">
<p className='box'>
React.
<span>你好</span>
</p>
</header>
</div>
);
}
export default App;
原文地址:https://blog.csdn.net/Hazel928/article/details/112907129
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。