修改ant design组件自带样式

背景

Vue-CLI创建的项目

需求

把走马灯的面板指示点（如图1）改成真正的点（如图2）

解决方法

1. 走马灯自带面板指示点类名dotsClass = "slick-dots"，考虑到项目中可能多处会用到走马灯，请自行更改类名（我的项目只有一处用到，故不想改）
2. 在src/assets/style/（这个是我用来放全局样式文件目录）下新建一个.css文件（其它类型的stylesheet文件也可以用，但我没试过），再次强调，如同一组件须多次使用、且样式要求不同，请自行更改类名，样式文件也请分开创建，注意互相覆盖问题。
3. 在需要用到此样式的内引入该文件，如下

<style lang='scss' scoped>
@import '~@/assets/style/carousel.css';		//我不确定其他样式语言是否支持@import
</style>

webstorm用户使用import可能会报错，请移步至Setting > Language & Frameworks > JavaScript > Webpack 将webpack configuration file路径切换至：当前项目绝对路径\node_modules\@vue\cli-service\webpack.config.js，报错消失。

Notice

1. 根据我的实验，直接在组件使用的单页面模板内修改组件内部样式无用，加上/deep/、::v-deep都没用。
2. 关于组件内部元素的类名，请自行在开发者工具中检查，然后再到样式文件修改（这是最麻烦的地方），建议在sandbox中对单个组件进行试验后，再到项目修改测试，因为sandbox对样式的响应比较快。
3. 自己预设的其他全局样式对组件没用（至少我的是这样），如*{ box-sizing: border-box; }，需要在刚刚建的单独样式文件里重新申明。