1.全局sass的引入
项目开发时,引入全局基本样式,是必要的。如何引入就不再赘述,度娘知道:https://blog.csdn.net/qq_31393401/article/details/80759535;
全局样式包括:reset.scss里包括哪些相信应该都清楚,其次base.scss内可以根据需求加一些基础可适用的样式,如input,button。利用scss预处理样式的优势定义一些样式变量,如与UI设计师定的网站主题风格,主色,辅色、通用字体大小、颜色等、清除浮动、处理文字溢出等。
移动端屏幕自适应问题:https://www.cnblogs.com/zlbrother/p/7823380.html
2.有关scoped使用中的相关问题
为了保证在子组件里写的样式由于命名相同不被其他组件样式污染,vue提出使用scoped,保证当前组件内样式难以在被其他组件修改。
但也存在一点问题,很多情况下父组件是需要修改子组件样式的,普通的写法肯定无法修改。vue提供了深度选择器。如果你希望 scoped 样式中的一个选择器能够作用得“更深”,例如影响子组件,你可以使用 >>> 操作符:
转换成
有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 操作符取而代之——这是一个 >>> 的别名,同样可以正常工作。
<style scoped>.a /deep/ .b{color:#fff}</style>
该问题解决了,但还有个问题。scoped真的不容易被修改吗?看下面代码
<style scoped>.b{font-size:20px}</style>
在其他组件也写了class b改变了字体大小,很明显会被改变,一样样式被污染了。
如何彻底解决该问题呢?下面会说。
使用scoped需要注意的两个问题:
a. CSS 作用域不能代替 class。考虑到浏览器渲染各种 CSS 选择器的方式,当 p { color: red } 设置了作用域时 (即与特性选择器组合使用时) 会慢很多倍。如果你使用 class 或者 id 取而代之,比如.example { color: red },性能影响就会消除。
b. 在递归组件中小心使用后代选择器! 对选择器 .a .b 中的 CSS 规则来说,如果匹配 .a 的元素包含一个递归子组件,则所有的子组件中的 .b 都将被这个规则匹配。
3.css Module的使用
在style标签中添加module属性,表示打开CSS-loader的模块模式
在模板中使用动态类绑定:class,并在类名前面加上'$style.'
也可以使用数组或对象语法
4.UI库的引入
目前比较好的UI库有element-ui,可以按需取用。有趣的是,该UI库提供的部分组件,可以直接用组件名当class名去修改组件的样式。如:<el-row></el-row>;可以直接使用.el-row去修改样式。