在css的使用中,我们对一些常用、公共的css样式,可以单独提取出来,在用到地方再使用,可以保证一些公共的样式一致性、增强代码的维护性等。
1.新建css样式的文件
新建一个“对象内文本溢出时显示省略号”的样式:ellipsis.styl
ellipsis()
overflow: hidden
white-space: nowrap
text-overflow: ellipsis
新建一个“公共的颜色、字号”的样式:varibles.styl
$bgColor = #00bcd4
2.对样式的使用
在使用的时候,我们需要引入这个文件,
@代表src目录 在css中使用时,需要前面加个~(波浪线)
@import ‘…/…/…/assets/styles/varibles.styl’ 等价于
@import ‘~@/assets/styles/varibles.styl’ 等价于
这里我们也可以对路径起一个别名,需要在webpack.base.conf.js中做出修改(改后需要重启):
module.exports = {
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'styles': resolve('src/assets/styles')
}
}
}
src/assets/styles 起一个别名:styles,之后就可以用这个别名了,
@import ‘~styles/varibles.styl’
在这个文件中,我们还能看到@代表了sre目录。
<style lang="stylus" scoped>
@import '~styles/varibles.styl'
@import '~styles/ellipsis.styl'
.aa {
background $bgColor
}
.bb {
ellipsis()
}
</style>
这样子,在样式中我们就可以这么使用了!