react 配置less和编写less代码

一、配置less

    1.安装less

npm install less@3.9.0
npm install less-loader@4.1.0

　 2. 命令行输入命令弹出 config配置文件夹。

npm run eject

    3. 打开config/webpack.config.js 文件，开始配置工作

      全局搜索  sassModuleRegex，在它下面添加两行代码。

// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;

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

     全局搜索  getStyleLoaders函数，并添加如下代码

{
   loader: require.resolve('css-loader'),
   options: cssOptions,
},
{
   loader: require.resolve('less-loader'), // 新增
   options: cssOptions,
},

     全局搜索  oneOf，并添加下面代码。

oneOf: [
    {
        ...//其他配置
    }，
    ...//其他配置

　　　　// 新增

      {

         test: lessRegex,

         exclude: cssModuleRegex,

         use: getStyleLoaders({

             importLoaders: 1,

              ourceMap: isEnvProduction && shouldUseSourceMap,

         }),

         sideEffects: true,

       },

       // 新增

       {

          test: lessModuleRegex,

          use: getStyleLoaders({

             importLoaders: 1,

             sourceMap: isEnvProduction && shouldUseSourceMap,

             modules: true,

             getLocalIdent: getCSSModuleLocalIdent,

          }),

       }, // less end;

]

然后重启项目。

 

二、react里面使用less。

       1. 新建index.less文件。

#myId {
  color: #999999;
  font-size: 32px;
}
.myClass {
  color: #000;
  font-size: 56px;
} 

      2. 引入index.less文件和使用。

import React from 'react';
import './index.less';

export default class CmtList extends React.Component {
  render() {
    return (
      <div>
        <div id="myId">我是 id 样式名</div>
        <div className="myClass">我是 class 样式名</div>
      </div>
    )
  }
}

 

 

配置less参考至：https://www.jianshu.com/p/7fe9e435eb7c