Vant - 自定義樣式變數配置
阿新 • • 發佈:2022-04-20
Vant 使用了 Less 對樣式進行預處理,並內建了一些樣式變數,通過替換樣式變數即可定製你自己需要的主題。
1. 安裝 less-loader
npm install less [email protected] --save-dev
// 安裝最新的 less-loader會報錯,這裡指定了版本5.0.0
2. 引入樣式檔案
方法一:手動引入
// 引入全部樣式
import 'vant/lib/index.less';
// 引入單個元件樣式
import 'vant/lib/button/style/less';
方法二:按需引入
// babel.config.js // 注意 babel6 不支援按需引入樣式,請手動引入樣式 module.exports = { plugins: [ [ 'import', { libraryName: 'vant', libraryDirectory: 'es', // 指定樣式路徑 style: (name) => `${name}/style/less`, }, 'vant', ], ], };
3. 新建樣式變數檔案
在專案style檔案相關的目錄下,新建 vantChange.less
,用於重新定義樣式變數。
// vantChange.less
// Steps
@step-active-color: #20b26c;
@step-icon-size: .22rem;
@step-font-size: .16rem;
@steps-background-color: #390ee7;
// Circle
@circle-text-font-size: .2rem;
4. 配置樣式變數
如果 vue-cli 搭建的專案,可以在 vue.config.js 中進行配置。
webpack 配置,參考 5. 參考資料 部分。
// vue.config.js const path = require('path') const customVant = path.resolve(__dirname, "./src/assets/styles/vantChange.less"); module.exports = { css: { loaderOptions: { less: { // 若 less-loader 版本小於 6.0,請移除 lessOptions 這一級,直接配置選項。 lessOptions: { modifyVars: { // 直接覆蓋變數 'text-color': '#111', 'border-color': '#eee', // 或者可以通過 less 檔案覆蓋(檔案路徑為絕對路徑) hack: `true; @import "${customVant}";`, }, }, }, }, }, };
5.參考資料
https://youzan.github.io/vant/v2/#/zh-CN/theme#bu-zou-er-xiu-gai-yang-shi-bian-liang