这是我参与8月更文挑战的第1天，活动详情查看： 8月更文挑战”juejin.cn/post/698796…
一、局部引入 （直接在组件中进行引用）
<!-- my-component.vue -->
<template>
<div>This will be pre-compiled</div>
</template>
<script src="./my-component.js"></script>
<style src="./my-component.css"></style>
二、全局引入
在common文件夹中新建base.less/common.js
@primary-color: red;
.box {
h1 {
color: @primary-color;
}
}
在App.vue中引入 会多出一个空的
<style lang="less"> @import "./commonCss/base.less"; </style>
或者： 在 main.js 中进行全局引用
`import ``'./static/css/common.css'`
三、在index.html中引入
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>stop</title>
<link rel="stylesheet" href="./static/css/global.css"> /*引入公共样式*/
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
四、混入mixin （vue+scss混合(mixins)使用(css代码的vuex(公共管理)）
ps： 文本溢出介绍：www.cnblogs.com/tanxiang669…
scss混合(mixins)使用
例一、使用混合mixins中的变量来定义一个n行文本溢出隐藏的公用样式。
1、创建mixins.scss文件
//文本n行溢出隐藏
@mixin ellipsisBasic($clamp:2) {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: $clamp;
}
以上代码中，$clamp是变量，决定最多显示几行文本，默认是显示2行，调用的时候可自行传参设置。
2、在组件中使用：
<style rel="stylesheet/scss" lang="scss" scoped>
@import '@/assets/css/mixin.scss';//引用此混合样式
p {
line-height: 0.42rem;
@include ellipsisBasic;//使用此混合样式，默认显示2行
}
p {
width: 100%;
line-height: 0.42rem;
@include ellipsisBasic(3);//使用此混合样式，默认显示3行
font-size: 0.28rem;
margin-top: 0.37rem;
}
</style>
