一.关于stylus装不上的问题
报错：npm WARN stylus-loader@2.5.1 requires a peer of stylus@>=0.52.4 but none was installed.
这是我在做Vue的一个demo时遇到的问题，在pckage.json中添加“stylus-loader”:"^2.1.1" npm install之后在控制台运行npm run dev报错，发现是因为少了依赖
查了一下解决办法有两个：
1.eslint-config-standard@6.2.1的提示解决方案
找到项目中的package.json文件,对应修改位置:
第一步:把eslint-config-standard 改成"^6.2.1" 比如: "eslint-config-standard": "^6.2.1",
第二步:把eslint-plugin-promise 改成 "^3.4.0" 比如: "eslint-plugin-promise": "^3.4.0",
如果再次安装的时候 提示update失败,可以先从插件中删除 eslint-plugin-promise的文件夹 然后在执行安装命令
2.stylus-loader@2.4.0的提示解决方案
第一步:把stylus-loader 改成 "^2.4.0" 比如: "stylus-loader": "^2.4.0", 如果没有这条记录就自行添加一条
第二步:需要多添加一条插件 "stylus": "0.52.4" 在package.json里面增加就好 然后执行安装命令 即可解决
二.浏览器自动出现兼容性写法
这是因为node-mdules文件夹里有一个postcss的文件夹
vue-loader依赖了这个插件，这个插件可以抹平一些兼容性写法。
三.关于1像素border的实现
办法：用伪元素 + 缩放巧妙地实现
给父元素增加一个伪类after，把after设置成一条线，在dpr为2或者3的手机的手机上通过meta进行缩放
1.定义一个mixin，这是css预处理器提供的一个方法，如定义一个函数,这个函数定义的是css的代码，这样写比较通用，可以在任意需要这段代码的地方调用这个函数，但是这里的写法跟直接写border-bottom:1px solid black是一样的，并没有实现缩放
border-1px($color)
position:relative
&:after
display:block
position:absolute
left:0
bottom:0
width:100%
border-top:1px solid $color
content:' '
&:before
display:block
position:absolute
left:0
top:0
width:100%
border-top:1px solid $color
content:' '
2.给我们刚刚设置的伪类实现缩放，使它真正的实现1像素边框
- 给父元素添加一个特殊样式，class=“border-1px”，这个class要全局定义，因为要多处使用啊。
@media (-webkit-min-device-pixel-ratio:1.5),(min-device-pixel-ratio:1.5)
.border-1px
&::after
-webkit-transform:scaleY(0.7)
transform:scaleY(0.7)
@media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2)
.border-1px
&::after
-webkit-transform:scaleY(0.5)
transform:scaleY(0.5)
<b >总结一下1像素的实现:</b>主要是利用了<b>伪类</b>和<b>缩放</b>的功能。
1.在需要画边框的元素(就叫父元素啦)上定义一个伪类，伪类是相对于父元素是absolute定位(元素当然得是relative啦，只要不是static就行哈)，通过伪类画出一个1像素的边框，定位到父元素的下面，当然就会呈现出父元素的下边框啦
2.应用一个class把伪类做缩放，根据设备的最小dpr指定缩放的比例，如dpr是2就缩放0.5倍，如dpr是1.5就缩放0.7倍
