vue项目css公共样式和全局引入
vue项目css公共样式和全局引入
·
基于vue/cli3.0+脚手架搭建Vue项目(08)
文章目录
前言
一、css公共样式
在assets
文件夹下,新建css
文件夹,新建global.scss
和variable.scss
文件
global.scss
代码:
@import "./variable.scss";
* {
box-sizing: border-box;
}
body,
p,
span,
div,
img,
i,
ul,
li,
strong,
input {
margin: 0;
padding: 0;
}
/*不倾斜*/
em,
i {
font-style: normal;
}
/*去掉列表前面的小点*/
ul {
li {
list-style: none;
}
}
/*去掉图片边框和图片底侧的空白缝隙*/
img {
border: 0;
vertical-align: middle;
}
/*button hover*/
button {
cursor: pointer;
}
/*取消链接的下划线*/
a {
text-decoration: none;
}
button,
input {
font-family: 'Microsoft YaHei', 'Heiti SC';
outline: none;
}
.hide,
.none {
display: none;
}
/*清除浮动*/
.clearfix:after {
visibility: hidden;
clear: both;
display: block;
content: " ";
height: 0;
}
.clearfix {
*zoom: 1;
}
/*双伪元素清除浮动*/
.clearfix:bofore,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
/*单行文字隐藏*/
.text-one-hidden {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/*多行溢出(超出省略)*/
.text-two-dot {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
word-break: break-word;
}
variable.scss
代码:
// 变量
$font-size-mini: 12px;
$font-size-common: 14px;
$font-size-medium: 16px;
$font-size-big: 20px;
$color-primary: #1E90FF;
$background-primary: #ffffff;
二、全局引入
1.sass-resources-loader依赖的安装
npm install sass-resources-loader -D
2.在vue.comfig.js文件中配置公共样式的文件路径
module.exports = defineConfig({
//...其他配置
css: {
loaderOptions: {
sass: {
// 支持多个scss样式文件,
//老版本sass-loader的options参数名为data,
//新版本sass-loader把data改为了prependData
prependData: `@import "@/assets/css/global.scss";`
}
}
}
})
tip:如果运行报错:Syntax Error: ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.
可以自行选择降低node-sass
和sass-loader
版本
npm install node-sass@4.12.0 sass-loader@8.0.2 -D
三、全局样式验证
<template>
<div class="demo">
<span class="demo-title">越过山丘,才发现无能等候</span>
</div>
</template>
<style lang="scss" scoped>
.demo {
.demo-title {
font-size: $font-size-big;
color: $color-primary;
}
}
</style>
总结
越过山丘,才发现无能等候。喋喋不休,再也唤不回温柔。–《山丘》
更多推荐
已为社区贡献1条内容
所有评论(0)