正確更改Ant?Design?of?Vue樣式的問題

更新時間：2022年09月20日 09:19:09 作者：I'm?左撇峰子

這篇文章主要介紹了正確更改Ant?Design?of?Vue樣式的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

背景

最近在搞項目，改用了 Ant Design UI 框架，根據(jù)項目要求肯定要更改原有樣式，但使用 Ant Design 過程中發(fā)現(xiàn)一個問題：直接在 <style></style> 內(nèi)改樣式改不了！

不得已去找官方文檔解決，但遺憾的是我看得一頭霧水...官方文檔給出好幾種更改方式，但這里我推薦使用 less 方式對樣式進行覆蓋，

首先來看看官方文檔怎么描述的：

對于以上文檔，存在的問題是：

1. __at__ 指的是 @，在 main.js 下是不能那樣寫的，就算去掉 @，寫成 import "~ant-design-vue/dist/antd.less" ，npm run dev 也會出錯；

2.自己建立的 less 文件中寫入以上代碼，同樣出錯。網(wǎng)絡資料下的寫法是向你自己建立的 less 文件寫入以下代碼：

@import "~ant-design-vue/dist/antd.less";   // 引入官方提供的 less 樣式入口文件
@import "your-theme-file.less";   // 用于覆蓋上面定義的變量

但遺憾的是同樣運行不了。而正確寫法應該是這種（看步驟）：

步驟

1.添加less和less-loader依賴

確保正確安裝 less 和 less-loader 依賴，在控制臺輸入以下命令：

npm install --save-dev less-loader less

下載太慢，請改用 cnpm 下載。

2.開啟javascriptEnabled

注：以下三種方式選擇一種適合自己的即可。

webpack@4：修改 webpack.config.js 文件：

// webpack.config.js
module.exports = {
  rules: [{
    test: /\.less$/,
    use: [{
      loader: 'style-loader',
    }, {
      loader: 'css-loader', // translates CSS into CommonJS
    }, {
      loader: 'less-loader', // compiles Less to CSS
      options: {javascriptEnabled: true},
    }],
    // ...other rules
  }],
  // ...other config
}

注意：less-loader 的處理范圍不要過濾掉 node_modules 下的 antd 包。

vue-cli 2：修改 build/utils.js 文件：

// build/utils.js
// less: generateLoaders('less'),
less: generateLoaders('less', {javascriptEnabled: true}),

vue-cli 3＆4：修改 vue.config.js 文件（不存在就新建一個）：

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      less: {javascriptEnabled: true}
    }
  }
}

3.新建reset.less重置樣式

在項目的 static 文件夾下新建一個 less 文件，這里以 reset.less 為例，如圖：

4.添加樣式引用

自行安裝 ant-design-vue 依賴，在 src/main.js 文件下添入以下代碼：

//只添加未被注釋代碼行即可
//import Vue from 'vue'
import Antd from 'ant-design-vue'
//import App from './App'
import '../static/reset.less'           //———>引入 reset.less，請確保路徑正確。
 
//Vue.config.productionTip = false
 
Vue.use(Antd)
 
//new Vue({
//  el: '#app',
//  components: { App },
//  template: '<App/>'
//})

5.添加測試代碼

在 src/components 下的 HelloWorld.vue 添加 antd 樣式按鈕，如圖：

6.添加覆蓋樣式

在剛才建立的 reset.less 文件夾下添加以下代碼進行覆蓋樣式測試：

@import '~ant-design-vue/dist/antd.less';  //———>后綴是 less，別寫成 css 。
 
.ant-btn-primary {
  background-color: #F56C6C;
  border-color: #F56C6C;
}
.ant-btn-primary:hover, .ant-btn-primary:focus {
  background-color: #f55252;
  border-color: #f55252;
}

然后進行 npm run dev，此時瀏覽器顯示的應該是這樣的畫面：