ant-design-vueダイナミック切り替えテーマ色を実現

4266 ワード

一、使用するプラグインバージョン
1、「ant-design-vue」はバージョンに限らない
注意:ant-design-vueはbabel-plugin-importに基づいて必要に応じて導入され、ルートディレクトリの下にbabelが構築された.config.jsの内容は以下の通りです

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
  ],
  env: {
    development: {
      plugins: ['dynamic-import-node'],
    },
  },
  plugins: [
    [
      'import',
      {
        libraryName: 'ant-design-vue',
        libraryDirectory: 'es',
        style: true,
      },
    ],
  ],
}

2、「antd-theme-generator」:「^1.2.5」テーマのコアプラグインを交換する
特に注意すべきはantd-theme-generatorが1.2である場合である.8バージョンではnode-modules/ant-design-vue/lib/style/themes/defaultが必要です.lessファイルに次の内容を追加します.そうしないと、LessError:error evaluating function darken:color.toHSL is not a functionエラー、lessは生成できません
@table-header-sort-active-bg: darken(@table-header-bg, 3%); @table-header-filter-active-bg: darken(@table-header-sort-active-bg, 5%); @table-selection-column-width: 60px; moduleファイルを変更したくない場合はantd-theme-generatorを1.2に降格することができます.5バージョン.
3、「less」:「^2.7.3」、「less-loader」:「^5.0.0」ant-design-vueはlessに依存して開発されているためlessとless-loaderをインストール
二、具体的な配置
1、publicフォルダの下のindex.htmlにコメントant design vueを入れてテーマ色の下のコードを切り替えます



  
    
    
    
    
    
    
  
  
    <div id="app">   
	</div>
  <!-- ant design vue      -->
  <link rel="stylesheet/less" type="text/css" href="/color.less"/>
  <script>
      window.less = {
        async: false,
        env: 'production'
      };
 </script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"/>
  

</code></pre> 
  <p>      color.less  ，    node color     less</p> 
  <p>2、        color.js    </p> 
  <pre><code>const path = require('path')
const { generateTheme } = require('antd-theme-generator')
const options = {
  antDir: path.join(__dirname, './node_modules/ant-design-vue'),
  stylesDir: path.join(__dirname, './src/assets/styles/theme'),
  varFile: path.join(__dirname, './src/assets/styles/theme/variables.less'),
  mainLessFile: path.join(__dirname, './src/assets/styles/theme/index.less'),
  themeVariables: [
    '@primary-color',
    '@secondary-color',
    '@text-color',
    '@text-color-secondary',
    '@heading-color',
    '@layout-body-background',
    '@btn-primary-bg',
    '@layout-header-background',
  ],
  indexFileName: 'index.html',
  outputFilePath: path.join(__dirname, './public/color.less'),
}
generateTheme(options)
  .then(() => {
    console.log('Theme generated successfully')
  })
  .catch((error) => {
    console.log('Error', error)
  })</code></pre> 
  <p>3、  color.js    styles          src/assets/styles     theme   （            ）   【index.less,variables.less，】index.less     。    variables.less，      </p> 
  <pre><code>@import "~ant-design-vue/lib/style/themes/default.less";
@link-color: #00375B;
@primary-color: rgb(138, 164, 182);
:root {
    --PC: @primary-color; 
 }
.primary-color{
  color:@primary-color
}
</code></pre> 
  <p>4、  package.json       ，  【node color】  ，     </p> 
  <pre><code>"serve": "node color && vue-cli-service serve",
 "build": "node color && vue-cli-service build",
 "build:stage": "node color && vue-cli-service build --mode staging",</code></pre> 
  <p>         public color.less      </p> 
  <p>                  ----（    ，    ）</p> 
  <p> </p> 
 </div> 
</div>
                            </div>
                        </div>

logrus 使い方メモ

C++11クラスのマルチステート