【react】create-react-app配置less

一、安装

npm install --save less
npm install --save less-loader@6.0.0 //记得加上版本号，版本过高会报错

二、将webpack.config.js暴露出来

npm run eject  //会生成config、scripts目录

三、找到config目录下的webpack.config.js文件，在50-70行之间有个cssRegex，在此处添加

const lessRegex =/\.less$/;
const lessModuleRegex =/\.module\.less$/;

四、在webpack.config.js文件500多行有个sassRegex，模仿写对应的lessRegex，修改重启后直接引入.less样式即可

// less
            {
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                },
                'less-loader'
              ),
              sideEffects: true,
            },
            // less
            {
              test: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                  modules: true,
                  getLocalIdent: getCSSModuleLocalIdent,
                },
                'less-loader'
              ),
            },

五、测试

App.js内容如下：

import React, { Component } from 'react'
//路由模块
import Navbar from './component/Navbar'
import { BrowserRouter as Router, Route ,Link, Routes} from "react-router-dom";
import Home from './component/Home'
import About from './component/About'
import Contact from './component/Contact'
//引入less
import './app.less'

class App extends Component {
  render() {
    return (
      <Router>
        <div className="App">
          <Navbar />
          <Routes>
            <Route path='/' element={<Home/>} />
            <Route path='/about' element={<About/>} />
            <Route path='/contact' element={<Contact/>} />
          </Routes>
        </div>
      </Router>

    );
  }

}

export default App;

创建app.less文件添加样式

* {
  padding: 0;
  margin: 0;
}

h1 {
  text-align: center;
  font-size: 45px;
  font-family: Arial, Helvetica, sans-serif;
  color: rgb(6, 0, 32);
  padding: 40px;
}

.list {
  display: flex;
  justify-content: center;
  width: 100%;

 ul li {
  list-style: none;
  margin: 42px;
  text-align: center;
}}

a {
  text-decoration: none;
  color: rgb(0, 0, 0);
  font-size: 18px;
  font-family: Arial, Helvetica, sans-serif;
  padding: 14px 25px;
  background-color: transparent;
  border: 2px solid rgb(12, 0, 66);


&:hover {
  background-color: rgb(12, 0, 66);
  color: rgb(255, 255, 255);
}}

效果如下：