vue の Ant desgin を使用して vue-cli3 でテーマをカスタマイズする方法

ソースアドレス: GitHub - liuxin00020/vue-test 

公式がテーマをカスタマイズする方法を提供しています。基本的には操作に従うだけです。重要なポイントをいくつか紹介します。

公式ウェブサイト：https://www.antdv.com/docs/vue/customize-theme-cn/

重要なポイントの記録:

• プロジェクトが scss/sass プリプロセッサを使用している場合、インストールする必要があるのはますます少なくなり、 -loader . Vue-cli3 では最下位層でより少ない設定が予約されているため、設定を追加するためのファイルを見つける必要はありません

​​​​​​​​​​​​​​cnpm install less less-loader --save-dev

• babel-plugin-importのオンデマンド導入を使用する場合、導入量を減らすために、Jiang スタイルの値を true に変更する必要があります。

plugins: [
    ["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": true}] // `style: true` 会加载 less 文件
  ]

• Vue-cli3 は、vue.config.js で設定する必要があるless変数をオーバーライドします。すべての変数はここをクリックしてください

css: {
    // requireModuleExtension: false,  // 这句话不能要，否则css样式不起效
    loaderOptions: {
      less: {
        // 这里的选项会传递给 less-loader
        lessOptions: {
          modifyVars: {
            "primary-color": "#1DA57A",
            "link-color": "#1DA57A",
            "border-radius-base": "2px"
          },
          javascriptEnabled: true // 这句话必须要，否则不起效
        }
      }
    }
  }