前言
良好的编程习惯对我们编程能力的提高是非常重要的，良好的编程风格，源代码的逻辑简明清晰，易读懂才是判别一个好程序员的重要标准。
出现打脸
我觉得我的编程习惯还是可以的，html一直是按照标签语义化来写，命名标准也是以见词识意来起的，使用UI框架前也是先写完静态页面，才套用框架，但是最近的一次项目却是因此引发了一个bug。
这个项目使用了Ant design作为UI框架进行开发。由于我是使用了脚手架搭建的，而且css预处理器使用的是SCSS，并不是ant-design推荐使用的less。一开始我就想先试一下可不可以使用不更改预编译器，果然不出意外，除了叫我下载less跟less-loader，我照着做了还是给我报错，我想会不会一开始我选了scss，现在使用了less，需要在vue.config.js里面修改，于是我就在vue.config.js里面修改：
const fs = require('fs');
const path = require('path');
module.exports = {
pluginOptions: {
"style-resources-loader": {
preProcessor: "less",
patterns: [
//这个是加上自己的路径，
//注意：试过不能使用别名路径
path.resolve(__dirname, "./src/assets/css/base.less")
]
}
}
};
修改完之后，发现还是报错，因为我一开始是设置了按需加载，网上一搜答案还是找得到的，是由于按需导入导致的， 于是按照网上的做法修改：
---babel.config.js---
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
plugins:[["import",{"libraryName":"ant-design-vue", "libraryDirectory": "es", "style": 'css' }]]
}
//将原先的"style":true改为"style":'css'
是的，问题解决了，但是看客你以为就完了吗，我还没说到重点呢。
引发了bug
先来看一张开发环境下的项目部分预览：
左边的样式没有问题，符合我的预期，但是当我通过webpack打包构建后：
怎么就成这样子了，为什么，点击的时候才会变色（不过挺帅的），但是不符合预期，于是我就继续找，但是找遍了所有能找的资料，基本上只找到了上面配置按需导入的问题，并没有我这个问题。
后面一直想一直想，突然想到了webpack，想起了webpack简介中的第一句话：
当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
因为我编写页面时是先写静态页面，出了雏形才选择UI框架来套，而一开始我在开发模式下，除了引入自己写的css样式，还有UI框架自己的样式，而在预览的时候，发现UI框架提供的样式的类名出现在我自己写的样式的类名的后面，而css有一个规则，选择器优先级相同的样式，后出现的会覆盖先出现的，这也是为什么在开发模式下，总是能够如我预期的看到UI的样式。
但是！
但是！
但是！
webpack在打包的时候，是递归的构建依赖，那么UI框架提供的样式与自己提供的样式谁先出现就变得不可预测了。后面直接把自己写的样式给删除，于是问题就解决了。
平时背的概念终于派上用场了！！！
