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>

---

总结

越过山丘，才发现无能等候。喋喋不休，再也唤不回温柔。–《山丘》

这篇好文章是转载于：学新通技术网