vue中css样式的提取与引用

最新推荐文章于 2023-10-13 11:26:12 发布

原创最新推荐文章于 2023-10-13 11:26:12 发布 · 2.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue #css

vue 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何创建并使用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>