柚子快報邀請碼778899分享：less 項目主題定制方式探究

http://yzkb.51969.com/

前端換膚通常是對項目主題色進行更換，一般來說換膚需求通常有以下幾種情況：

提供幾種可供選擇的顏色主題，用戶可對主題進行切換，一般這種主題不會很多。進一步的，提供輸入框由用戶自定義色值，或者通過取色板取色，可供選擇的顏色范圍就很大了。但更多的，是標準項目針對不同客戶進行定制開發(fā)，交付定制的顏色和控件樣式主題。

多主題換膚

JS切換全局class

這里舉例小說網(wǎng)站常見的夜間模式的切換。

首先，我們先在項目中建立個 day.less 文件，這是我們通常打開網(wǎng)站見到的網(wǎng)站樣式。然后，我們再在項目中建立個 night.less 文件，這個樣式展示的也即夜間模式。到這，我們可以通過js來控制樣式的切換。

如下是代碼示例：

export default {

data() {

return {

isDayMode: true, // 默認日間模式

}

},

computed: {

containerClass() {

return this.isDayMode ? 'day-container' : 'night-container'

}

}

}

day.less

.day-container {

background: white!important;

color: black!important;

}

night.less

.night-container {

background: black!important;

color: white!important;

}

JS切換href屬性值

在沒有使用構(gòu)建工具的項目中，可以使用 JS 切換 href 屬性值，進而實現(xiàn)換膚功能，本質(zhì)上與上面所述方法是一致的。

document.querySelector('#containerClass').href = 'night.css'

css 變量實現(xiàn)動態(tài)色值換膚

如果要實現(xiàn)更靈活的動態(tài)換膚，比如自定義色值或使用從取色板上獲取的顏色進行主題色的更換，那上面的方式就不適合了。

通過定義全局主題色 css 變量，方便各模塊都能通過 var() 使用主題色變量，再用 setProperty 對全局主題色變量值進行動態(tài)修改。

先在頂級元素上設(shè)置css全局變量，用法就是給變量加 -- 前綴。

body {

--themeColor:#000;

}

涉及到主題色的都改成 var(--themeColor) 這種方式

.main {

color: var(--themeColor);

}

修改主題色

document.body.style.setProperty('--themeColor', '#ff0000');

可以看下兼容性，大部分主流瀏覽器還是支持的，而且操作起來夠簡便。

組件庫換膚方式

實際業(yè)務(wù)中，交付的項目更多的是對所用到的組件進行顏色和樣式定制，實際是對項目所用的組件庫進行主題上的定制。那我們分析下業(yè)務(wù)上常用的組件庫，如何進行主題上的定制。

Element-UI 定制主題

Element 默認提供一套主題，CSS 命名采用 BEM 的風(fēng)格，方便使用者在項目中改變 SCSS 變量進行樣式覆蓋。

Element 的 theme-chalk 使用 SCSS 編寫，如果你的項目也使用了 SCSS，那么可以直接在項目中改變 Element 的樣式變量。

新建一個樣式文件，例如 element-variables.scss，寫入以下內(nèi)容：

/* 改變主題色變量 */

$--color-primary: orange;

/* 改變 icon 字體路徑變量，必需 */

$--font-path: '~element-ui/lib/theme-chalk/fonts';

@import "~element-ui/packages/theme-chalk/src/index";

上面只做了主題色的變更，如果你對其他相關(guān)顏色變量也有改動的需求，可進行變量覆蓋。

注意：此處變量的覆蓋需要在引入 element-ui 默認樣式的前面。因為默認變量添加了 !default 屬性，則當變量已經(jīng)賦值后，則不進行值的替換。

如果還需要對組件進行樣式上的定制，則可以翻閱主題樣式文件：element-ui/packages/theme-chalk/src/common/var.scss

將需要定制的主題樣式變量名復(fù)制到你的文件上，進行重寫賦值。

/* 改變主題色變量 */

$--color-primary: orange;

/* 改變組件樣式 */

$--button-border-radius: 10px;

之后，在項目的入口文件中，直接引入以上樣式文件即可（無需引入 Element 編譯好的 CSS 文件）：

import Vue from 'vue'

import Element from 'element-ui'

import './element-variables.scss'

Vue.use(Element)

需要注意的是，覆蓋字體路徑變量是必需的，將其賦值為 Element 中 icon 圖標所在的相對路徑即可。

Ant Design Vue 定制主題

Ant Design 設(shè)計規(guī)范上支持一定程度的樣式定制，以滿足業(yè)務(wù)和品牌上多樣化的視覺需求，包括但不限于主色、圓角、邊框和部分組件的視覺定制。

antd 的樣式使用了 Less 作為開發(fā)語言，并定義了一系列全局/組件的樣式變量，你可以根據(jù)需求進行相應(yīng)調(diào)整。

以下是一些最常用的通用變量，所有樣式變量可以在 這里 找到。

@primary-color: #1890ff; // 全局主色

@link-color: #1890ff; // 鏈接色

@success-color: #52c41a; // 成功色

@warning-color: #faad14; // 警告色

@error-color: #f5222d; // 錯誤色

@font-size-base: 14px; // 主字號

@heading-color: rgba(0, 0, 0, 0.85); // 標題色

@text-color: rgba(0, 0, 0, 0.65); // 主文本色

@text-color-secondary: rgba(0, 0, 0, 0.45); // 次文本色

@disabled-color: rgba(0, 0, 0, 0.25); // 失效色

@border-radius-base: 4px; // 組件/浮層圓角

@border-color-base: #d9d9d9; // 邊框色

@box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15); // 浮層陰影

我們使用 modifyVars 的方式來進行覆蓋變量。下面將針對不同的場景提供一些常用的定制方式。

在構(gòu)建工具中定制主題

項目根目錄下新建文件 vue.config.js（這里只舉例了這種方式），其他方式可以參閱定制主題

在 webpack 配置里開啟，這里使用 less@3.13.1 less-loader@6.2.0

module.exports = {

css: {

loaderOptions: {

less: {

lessOptions: {

// If you are using less-loader@5 please spread the lessOptions to options directly

modifyVars: {

'primary-color': '#1DA57A',

'link-color': '#1DA57A',

'border-radius-base': '2px',

},

javascriptEnabled: true,

},

},

},

},

};

在 main.js 中進行引入，此處注意這里的 css 樣式文件為 less 格式，以在構(gòu)建時進行變量的覆蓋。

import Antd from 'ant-design-vue';

import 'ant-design-vue/dist/antd.less'

Vue.use(Antd);

配置 less 變量文件

另外一種方式是建立一個單獨的 less 變量文件，引入這個文件覆蓋 antd.less 里的變量。

@import '~ant-design-vue/dist/antd.less'; // 引入官方提供的 less 樣式入口文件

@import 'your-theme-file.less'; // 你自己的主題樣式文件，用于覆蓋上面定義的變量

注意：

注意樣式必須加載 less 格式，一個常見的問題就是引入了多份樣式，less 的樣式被 css 的樣式覆蓋了，如果你是通過 ‘a(chǎn)nt-design-vue/dist/antd.css’ 引入樣式的，改為 ‘a(chǎn)nt-design-vue/dist/antd.less’。這里進行變量的覆蓋與 Element-UI 的處理順序是不一樣的，因為這里的變量是按照前后順序進行覆蓋的。默認 ant-design-vue 變量值并沒有進行特殊處理。這種方式已經(jīng)載入了所有組件的樣式，不需要也無法和按需加載插件 babel-plugin-import 的 style 屬性一起使用。如果你在使用 babel-plugin-import 的 style 配置來引入樣式，需要將配置值從 ‘css’ 改為 true，這樣會引入 less 文件。

Vant 定制主題

Vant 提供了一套默認主題，CSS 命名采用 BEM 的風(fēng)格，方便使用者覆蓋樣式。

Vant 使用了 Less 對樣式進行預(yù)處理，并內(nèi)置了一些樣式變量。

完整的內(nèi)置變量的文件路徑為：node_modules/vant/es/style/var.less 或者 node_modules/vant/lib/style/var.less，兩文件內(nèi)容一致。

如下進行部分變量的羅列：

// Color Palette

@black: #000;

@white: #fff;

@gray-1: #f7f8fa;

@gray-2: #f2f3f5;

@gray-3: #ebedf0;

@gray-4: #dcdee0;

@gray-5: #c8c9cc;

@gray-6: #969799;

@gray-7: #646566;

@gray-8: #323233;

@red: #ee0a24;

@blue: #1989fa;

@orange: #ff976a;

@orange-dark: #ed6a0c;

@orange-light: #fffbe8;

@green: #07c160;

// Gradient Colors

@gradient-red: linear-gradient(to right, #ff6034, #ee0a24);

@gradient-orange: linear-gradient(to right, #ffd01e, #ff8917);

// Component Colors

@text-color: @gray-8;

@active-color: @gray-2;

@active-opacity: 0.7;

@disabled-opacity: 0.5;

@background-color: @gray-1;

@background-color-light: #fafafa;

@text-link-color: #576b95;

// Padding

@padding-base: 4px;

@padding-xs: @padding-base * 2;

@padding-sm: @padding-base * 3;

@padding-md: @padding-base * 4;

@padding-lg: @padding-base * 6;

@padding-xl: @padding-base * 8;

// Font

@font-size-xs: 10px;

@font-size-sm: 12px;

@font-size-md: 14px;

@font-size-lg: 16px;

@font-weight-bold: 500;

@line-height-xs: 14px;

@line-height-sm: 18px;

@line-height-md: 20px;

@line-height-lg: 22px;

@base-font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue',

Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB',

'Microsoft Yahei', sans-serif;

@price-integer-font-family: Avenir-Heavy, PingFang SC, Helvetica Neue, Arial,

sans-serif;

// Animation

@animation-duration-base: 0.3s;

@animation-duration-fast: 0.2s;

@animation-timing-function-enter: ease-out;

@animation-timing-function-leave: ease-in;

// Border

@border-color: @gray-3;

@border-width-base: 1px;

@border-radius-sm: 2px;

@border-radius-md: 4px;

@border-radius-lg: 8px;

@border-radius-max: 999px;

通過替換樣式變量即可定制你自己需要的主題。

引入樣式源文件

定制主題時，首先需要引入組件對應(yīng)的 Less 樣式文件，支持按需引入和手動引入兩種方式。

按需引入樣式（推薦）

按需引入首先需要安裝插件：npm i babel-plugin-import -D

babel-plugin-import 是一款 babel 插件，它會在編譯過程中將 import 的寫法自動轉(zhuǎn)換為按需引入的方式。

在 babel.config.js 中配置按需引入樣式源文件，注意 babel6 不支持按需引入樣式，請手動引入樣式。

module.exports = {

plugins: [

[

'import',

{

libraryName: 'vant',

libraryDirectory: 'es',

style: (name) => `${name}/style/less`, // 自動處理組件樣式路徑，這里的name是組價名

},

'vant',

],

],

};

手動引入樣式（不推薦）

// 引入全部樣式

import 'vant/lib/index.less';

// 引入單個組件樣式

import 'vant/lib/button/style/less';

修改樣式變量

使用 Less 提供的 modifyVars 即可對變量進行修改，下面是參考的 webpack 配置。

// webpack.config.js

module.exports = {

rules: [

{

test: /\.less$/,

use: [

// ...其他 loader 配置

{

loader: 'less-loader',

options: {

// 若 less-loader 版本小于 6.0，請移除 lessOptions 這一級，直接配置選項。

lessOptions: {

modifyVars: {

// 直接覆蓋變量

// 'text-color': '#111',

// 'border-color': '#eee',

// 或者可以通過 less 文件覆蓋（文件路徑為絕對路徑）

hack: `true; @import "your-less-file-path.less";`, // 推薦這種，更為靈活且方便后續(xù)維護

},

},

},

},

],

},

],

};

如果 vue-cli 搭建的項目，可以在 vue.config.js 中進行配置。

// vue.config.js

module.exports = {

css: {

loaderOptions: {

less: {

// 若 less-loader 版本小于 6.0，請移除 lessOptions 這一級，直接配置選項。

lessOptions: {

modifyVars: {

// 直接覆蓋變量

// 'text-color': '#111',

// 'border-color': '#eee',

// 或者可以通過 less 文件覆蓋（文件路徑為絕對路徑）

hack: `true; @import "your-less-file-path.less";`, // 推薦這種，更為靈活且方便后續(xù)維護

},

},

},

},

},

};

柚子快報邀請碼778899分享：less 項目主題定制方式探究

http://yzkb.51969.com/

參考閱讀