# Nuxt.js と Ant Design Vue 2 テーマカスタマイズ
基本環境
- nuxtjs 2.15
- vuejs 2.7
- ant design vue 1.7
📦 package.json 内容一覧
{
"name": "hapicode.com",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"lintfix": "prettier --write --list-different . && yarn lint:js --fix"
},
"dependencies": {
"@nuxtjs/axios": "^5.13.6",
"@nuxtjs/pwa": "^3.3.5",
"ant-design-vue": "^1.7.8",
"core-js": "^3.25.3",
"less": "^4.1.3",
"less-loader": "^7.3",
"nuxt": "^2.15.8",
"vue": "^2.7.10",
"vue-server-renderer": "^2.7.10",
"vue-template-compiler": "^2.7.10"
},
"devDependencies": {
"prettier": "^2.7.1"
}
}
# パッケージをインストール
yarn add ant-design-vue
# プラグインファイル作成
ルートディレクトリ配下にpluginsディレクトリ作成
plugins/antd-ui.jsファイル作成
import Vue from "vue";
import Antd from "ant-design-vue/lib";
Vue.use(Antd);
# スタイルファイル作成
stylesディレクトリをルート配下に作成
styles/theme.lessファイル作成
@import "~ant-design-vue/dist/antd.less";
@primary-color: #ccc; // primary color for all components
@link-color: #0d4f8c; // link color
@success-color: #52c41a; // success state color
@warning-color: #faad14; // warning state color
@error-color: #f5222d; // error state color
@font-size-base: 14px; // major text font size
@heading-color: rgba(0, 0, 0, 0.85); // heading text color
@text-color: rgba(0, 0, 0, 0.65); // major text color
@text-color-secondary: rgba(0, 0, 0, 0.45); // secondary text color
@disabled-color: rgba(0, 0, 0, 0.25); // disable state color
@border-radius-base: 4px; // major border radius
@border-color-base: #d9d9d9; // major border color
@box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15); // major shadow for layers
ベースの antd.less ファイルインポートしてオーバーライトで書き換える
# nuxt.config.js 設定ファイル更新
nuxt.config.js ファイル内容
export default {
target: "static",
head: {
title: "hapicode.com",
meta: [
{ charset: "utf-8" },
{ name: "viewport", content: "width=device-width, initial-scale=1" },
{ hid: "description", name: "description", content: "" },
{ name: "format-detection", content: "telephone=no" },
],
link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }],
},
css: ["@/styles/theme.less"],
plugins: ["@/plugins/antd-ui"],
components: true,
buildModules: [],
modules: ["@nuxtjs/axios", "@nuxtjs/pwa"],
axios: {
baseURL: "/",
},
pwa: {
manifest: {
lang: "en",
},
},
// Build Configuration: https://go.nuxtjs.dev/config-build
build: {
loaders: {
less: {
lessOptions: {
javascriptEnabled: true,
math: "always",
},
},
},
},
};
- css オプションにテーマファイルを追加
- plugin オプションに antd-ui 紐付け
- build オプションに less 解析できるように設定
less と less-loader
Nuxt.js のビルド時に Less を処理するためには、less と less-loader の依存関係をインストールしておく必要があります。
yarn add less less-loader