[JavaScript知识库]在React 脚手架中配置less

方法一

脚手架创建项目(ts版本)

npx create-react-app react-project --template typescript

脚手架修改webpack配置

修改webpack配置适配less

安装相关插件

 npm i customize-cra react-app-rewired
 npm i less less-loader@6.0.0 #less-loader不能太高，会报错

修改package.json

 "scripts": {
     "start": "react-app-rewired start", # 主要就是这两列，后面两列可以不用改
     "build": "react-app-rewired build", #
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   }

根路径新建文件config-overrides.js

 // 在文件中添加如下，即可
 const { override, addLessLoader } = require("customize-cra");
 module.exports = override(addLessLoader());

类型检查报错：找不到less模块

修改react-app-env.d.ts，脚手架默认创建，添加如下行

declare module '*.less' {
  interface Style {
    [propName: string]: string
  }
  const style: Style
  export default style
}

less import 问题

如果要使用css module模块，必须将less文件命名为xxx.module.less，才能通过className={style.container}来指定样式，且只能通过这种方式来指定样式

如果不添加.module，则只能import 'xxx.less'，无法指定命名className,且不添加.module直接import会污染全局样式

方法二

全局安装Creact-React-App

npm install -g create-react-app //全局安装js 版本

在父文件夹创建相应的子文件夹(工程文件夹)

npx create-react-app my-app --template typescript //创建typescript 类型文件

create-react-app my-app	//创建js版本文件

进入相应的工程文件

npm run eject	//打开配置文件

在webpack.config.js文件中设置如下:

起始位置62行左右 less进行如下更改:
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

          
           在css配置文件下面,起始位置在500行左右
            {
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders({
                importLoaders: 3,
                sourceMap: isEnvProduction
                  ? shouldUseSourceMap
                  : isEnvDevelopment,
              }, "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 (https://github.com/css-modules/css-modules)
            // using the extension .module.css
            {
              test: lessModuleRegex,
              use: getStyleLoaders({
                importLoaders: 3,
                sourceMap: isEnvProduction
                  ? shouldUseSourceMap
                  : isEnvDevelopment,
                modules: {
                  getLocalIdent: getCSSModuleLocalIdent,
                },
              }, "less-loader"),
            },

安装相应的less包

npm add less less-loader@5.0.0//在这里安装的less-loader的包是低版本 高版本可能存在不兼容的问题

通过less 来修改主题颜色

1.在public/index.html中引入样式

 <link rel="stylesheet/less" type="text/css" href="theme.less" />

2.在public/设置引入样式theme.less

@primary-color: #ff0033;
.btns {
  border: 1px solid @primary-color;
  background: @primary-color;
}
.link:hover {
  color: @primary-color !important;
}
.one:hover {
  color: @primary-color !important;
}
.tipmes {
  color: @primary-color !important;
}

3.在需要改变的地方加入className

<input
              type="button"
              className="btns"
              value="打开胶囊"
              onClick={handeOpen}
            />

4.安装less 添加点击事件

import less from "less"; 

const changeTheme = () => {
    if (num < color.length - 1) {
      setNum(num + 1);
      less.modifyVars({
        "@primary-color": color[num],
      });
    } else {
      setNum(0);
      less.modifyVars({
        "@primary-color": color[num],
      });
    }
  };

版本二

1.需要在/public文件夹下放入一个less文件夹，用来存放需要改变的全局样式

//pulic/style.less

@color: #ff0033;
#root{
  .themeBtn {
    background: @color;
    border: 1px solid @color;
  }
  
  .linkA:hover {
    color: @color;
  }
}

2.在pulic/index.html页面引入less文件

<link rel="stylesheet/less" type="text/css" href="%PUBLIC_URL%/../style.less" />
ps:注意link标签的位置和href路径，如果没有找到style.less文件，会提示*Less* has finished and no sheets were loaded

3.在需要修改全局样式的页面，引入less，用modifyVas方法对样式变量进行修改

import less from "less";

setColor(color: string) {
    less.modifyVars({ "@color": color });
    this.bgColor = color;
}