vue中css样式的提取与引用

本文介绍如何创建并使用CSS样式文件,如实现文本溢出显示省略号的效果及定义公共颜色和字体大小,通过合理组织样式提高代码可维护性和一致性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在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>

这样子,在样式中我们就可以这么使用了!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值