阅读 1688

如何正确更改Ant Design of Vue样式

由于百度不是很喜欢收录语雀上的文章,所以近期打算把语雀记录的一些东西搬到 CSDN 和掘金,文章内容可能对前端老司机没啥新鲜的哈!勿怪勿怪!但是我仍然会把在学习前端遇到的坑记录下来,方便初学者跨坑哈!

背景

最近在搞项目,改用了 Ant Design UI 框架,根据项目要求肯定要更改原有样式,但使用 Ant Design 过程中发现一个问题:直接在 <style></style> 内改样式改不了!不得已去找官方文档解决,但遗憾的是我看得一头雾水...官方文档给出好几种更改方式,但这里我推荐使用 less 方式对样式进行覆盖,首先来看看官方文档怎么描述的:

微信截图_20190521234148.png

对于以上文档,存在的问题是:

1. __at__ 指的是 @,在 main.js 下是不能那样写的,就算去掉 @,写成 import "~ant-design-vue/dist/antd.less" ,npm run dev 也会出错;

2.自己建立的 less 文件中写入以上代码,同样出错。网络资料下的写法是向你自己建立的 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 为例,如图:

微信截图_20190522000319.png

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 样式按钮,如图:

微信截图_20190522002125.png

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,此时浏览器显示的应该是这样的画面:

微信截图_20190522004239.png

按钮变成红色样式,而不是蓝色默认样式。如果没有效果或者编译出错的话,尝试把 less 依赖降级到 2.7.3 看看(less-loader 版本不用管它)。

本文由 西柚子团队 - 左撇峰子 编辑,转载时请附上原文链接,谢谢合作!
西柚子官网:www.seeyoz.cn/