marp: true

@uyun/cli-webpack-less-themes

基于 css 原生变量进行换肤，在编译的过程中会根据标准变量将less文件中颜色变量修改成 css 变量。并提供换肤编辑功能，以及变量依赖关系图

如何替换代码中的依赖的变量 ?

config.module.rule('less').oneOf('normal').use('less-loader')
  .options({
    javascriptEnabled: true,
    plugins: [],
    modifyVars: {
      '@color': 'var(--color)'
    },
    sourceMap: true
  })

如何获取 modifyVars ?

安装 @uyun/cli-webpack-less-themes

yarn add -D @uyun/cli-webpack-less-themes

// 标准基础变量
const { modifyVars } = require('./modifyVars')()

我们应该打造一个 css 变量控制台页面

演示

运行 @uyun/components 项目中 yarn dist

变量依赖收集原理

依然基于less 插件实现

module.exports = {
  install: function install(less, pluginManager, functions) {
    pluginManager.addVisitor({
      isPreEvalVisitor: true,
      run: function run(tree) {
        Promise.resolve().then(() => {
          // 收集变量
        })
        return tree;
      }
    });
  }
};

在基础组件中，与业务组件中使用

site/template/Layout/index.jsx

// 入口导入
import '@uyun/cli-webpack-less-themes/lib/browser'

bisheng.config.js

const lessVarsPugin = require('@uyun/cli-webpack-less-themes/lib/less-pugin')
const { modifyVars } = require('@uyun/cli-webpack-less-themes/lib/modifyVars')()
{
  loader: 'less-loader',
  options: {
    plugins: [lessVarsPugin],
    modifyVars
  }
}

yarn start

F1 查看变量关系图 F2 或点击右侧修改基础变量

演示

基础组件和业务组件项目中 yarn start

在 everest-cli 中使用

脚手架配置文件 everest.config.js

plugins: [
  // enableThemePanel 启用换肤面板
  ['@uyun/cli-webpack-less-themes', { enableThemePanel: true }]
]

F1 查看变量关系图 F2 或点击右侧修改基础变量

演示

cmdb 项目中配置插件

yarn start

Current Tags

4.0.1 ... latest (2 years ago)

111 Versions

4.0.1 ... 2 years ago
4.0.0 ... 2 years ago
3.1.2 ... 2 years ago
3.1.1 ... 2 years ago
3.1.0 ... 2 years ago
3.0.33 ... 3 years ago
3.0.31 ... 3 years ago
3.0.22 ... 4 years ago
3.0.21 ... 4 years ago
3.0.20 ... 4 years ago
3.0.19 ... 4 years ago
3.0.18 ... 4 years ago
3.0.16 ... 4 years ago
3.0.14 ... 4 years ago
3.0.12 ... 4 years ago
3.0.11 ... 4 years ago
3.0.10 ... 4 years ago
3.0.6 ... 4 years ago
3.0.4 ... 4 years ago
3.0.3 ... 4 years ago
3.0.2 ... 4 years ago
3.0.1 ... 4 years ago
3.0.0-beta.7 ... 4 years ago
3.0.0-beta.6 ... 4 years ago
3.0.0-beta.5 ... 4 years ago
3.0.0 ... 4 years ago
3.0.0-beta.4 ... 4 years ago
3.0.0-beta.3 ... 4 years ago
3.0.0-beta.2 ... 4 years ago
3.0.0-beta.1 ... 4 years ago
2.0.4 ... 4 years ago
2.0.3 ... 4 years ago
2.0.2 ... 4 years ago
2.0.0 ... 4 years ago
1.0.1 ... 4 years ago
1.0.0-beta.5 ... 4 years ago
1.0.0-beta.4 ... 4 years ago
1.0.0-beta.3 ... 4 years ago
1.0.0-beta.2 ... 4 years ago
0.1.1-beta.14 ... 4 years ago
0.1.1-beta.13 ... 4 years ago
0.1.1-beta.12 ... 4 years ago
0.1.1-beta.11 ... 4 years ago
0.1.1-beta.10 ... 4 years ago
0.1.1-beta.9 ... 4 years ago
0.1.1-beta.8 ... 4 years ago
0.1.1-beta.7 ... 4 years ago
0.1.1-beta.6 ... 4 years ago
0.1.1-beta.5 ... 4 years ago
0.1.1-beta.4 ... 4 years ago
0.1.1-beta.3 ... 4 years ago
0.1.1-beta.2 ... 4 years ago
0.1.1-beta.1 ... 4 years ago
0.1.1-beta.0 ... 4 years ago
0.0.2-beta.55 ... 4 years ago
0.0.2-beta.54 ... 4 years ago
0.0.2-beta.53 ... 4 years ago
0.0.2-beta.52 ... 4 years ago
0.0.2-beta.51 ... 4 years ago
0.0.2-beta.50 ... 4 years ago
0.0.2-beta.49 ... 4 years ago
0.0.2-beta.48 ... 4 years ago
0.0.2-beta.47 ... 4 years ago
0.0.2-beta.46 ... 4 years ago
0.0.2-beta.45 ... 4 years ago
0.0.2-beta.44 ... 4 years ago
0.0.2-beta.43 ... 4 years ago
0.0.2-beta.42 ... 4 years ago
0.0.2-beta.41 ... 4 years ago
0.0.2-beta.40 ... 4 years ago
0.0.2-beta.39 ... 4 years ago
0.0.2-beta.38 ... 4 years ago
0.0.2-beta.37 ... 4 years ago
0.0.2-beta.36 ... 4 years ago
0.0.2-beta.35 ... 4 years ago
0.0.2-beta.34 ... 4 years ago
0.0.2-beta.33 ... 4 years ago
0.0.2-beta.32 ... 4 years ago
0.0.2-beta.31 ... 4 years ago
0.0.2-beta.30 ... 4 years ago
0.0.2-beta.29 ... 4 years ago
0.0.2-beta.28 ... 4 years ago
0.0.2-beta.27 ... 4 years ago
0.0.2-beta.26 ... 4 years ago
0.0.2-beta.25 ... 4 years ago
0.0.2-beta.24 ... 4 years ago
0.0.2-beta.23 ... 4 years ago
0.0.2-beta.22 ... 4 years ago
0.0.2-beta.21 ... 4 years ago
0.0.2-beta.20 ... 4 years ago
0.0.2-beta.19 ... 4 years ago
0.0.2-beta.18 ... 4 years ago
0.0.2-beta.17 ... 4 years ago
0.0.2-beta.16 ... 4 years ago
0.0.2-beta.15 ... 4 years ago
0.0.2-beta.14 ... 4 years ago
0.0.2-beta.13 ... 4 years ago
0.0.2-beta.12 ... 4 years ago
0.0.2-beta.11 ... 4 years ago
0.0.2-beta.10 ... 4 years ago
0.0.2-beta.9 ... 4 years ago
0.0.2-beta.8 ... 4 years ago
0.0.2-beta.7 ... 4 years ago
0.0.2-beta.6 ... 4 years ago
0.0.2-beta.5 ... 4 years ago
0.0.2-beta.4 ... 4 years ago
0.0.2-beta.3 ... 4 years ago
0.0.2-beta.2 ... 4 years ago
0.0.2-beta.1 ... 4 years ago
0.0.2-beta.0 ... 4 years ago
0.0.1 ... 4 years ago