react配置less

下载less-loader报错

• 降版本 降到7.3.x!

gitlab地址

https://gitlab.com/typeofYh/wipi-bw/

style样式src下style文件夹

• common.less 全局样式

• theme.less 主题样式

• variables.less 变量

less配置

// 找到config/webpack.config.js getStyleLoaders方法添加

{

    javascriptEnabled: true,

}

// 修改

// sassRegex =》  lessRegex  1

// sassModuleRegex =》 lessModuleRegex 1

// sass-loader => less => loader  2

loader配置规则

    {

        test://,

        exclude:'',

        use:[{laoder:},{loader:}]

    }

    // 

主题颜色配置

• antd-theme-generator

• 新建colorjs文件 通过node执行colorjs文件编译 theme.color.less

• 在public下html中引入less,加载less.min.js

• 在window挂载less对象

• 切换主题通过window.less.modifyVars方法切换主题

//改变变量值方法

window.less.modifyVars({

    "变量名":"变量值"

})

//public/html页面





//可以参考antd下定制主题

前提

• theme.color.less下

const { generateTheme } = require('antd-theme-generator');

const path = require('path');

const options = {

  antDir: path.join(__dirname, './node_modules/antd'),

  stylesDir: path.join(__dirname, './src/style'), // all files with .less extension will be processed

  varFile: path.join(__dirname, './src/style/variables.less'), // default path is Ant Design default.less file

  mainLessFile: path.join(__dirname, './src/style/theme.less'),

  //需要配置上变量名

  themeVariables: [

    '@primary-color',

    '@bg-color'

  ],

  outputFilePath: path.join(__dirname, './public/color.less') // if provided, file will be created with generated less/styles

}

generateTheme(options).then(less => {

  console.log(less);

  console.log('Theme generated successfully');

})

.catch(error => {

  console.log('Error', error);

})