vue中引入公共样式的方法 - 百度文库

公共样式通常包括全局样式和组件样式

一、全局样式

全局样式是指在整个项目中都会生效的样式，比如网页的背景色、字体颜色、按钮样式等，在vue中引入全局样式有以下几种方法。

1、在index.html中引入

在vue项目的index.html文件中，可以直接通过<link>标签引入全局样式文件。例如

html文件中

<link rel="stylesheet" href="./assets/css/global.css">

这样，全局样式文件global.css中的样式就会在整个项目中生效

2、在main.js中引入(这种引入比较多)

在vue项目的入口文件main.js中，可以通过import语句引入全局样式文件。例如：

main.js文件中

import './assets/css/global.css'

这样，全局样式文件global.css中的样式就会在整个项目中生效

3、在App.vue中引入

在vue项目的主组件App.vue中，可以通过<style>标签引入全局样式。例如：

App.vue文件中

<style> 

@import url('./assets/css/global.css')

</style>

这样，全局样式文件global.css中的样式就会在整个项目中生效

二、组件样式

组件样式是指只在某个组件中生效的样式，比如某个特定按钮的样式。某个特定列表项的样式等。在vue中引入组件样式有以下几种方法。

1、在组件的<style>标签中引入

在vue组件的<style>标签中，可以使用@import语句引入组件样式文件。例如：

xx.vue文件中

<style>

@import url('./assets/css/button.css')

</style>

这样，组件样式文件button.css中的样式就会在改组件中生效

2、使用style标签引入

<template>
    <div class="button">按钮</div>
</template>


<style>
.button {
  background-color: #f00
  color: #fff;
}

</style>

这样，组件样式文件button.css中的样式就会在改组件中生效

3、使用CSS Modules

CSS Modules是一种讲CSS样式作用域话的技术，可以避免样式冲突的问题。在vue中，默认支持CSS Modules，只需要将样式文件命名为xx.module.css 或 xx.module.scss,并在组件中使用<style module>标签引入即可，例如：

<template>
  <div :class="$style.button">按钮</div>
</template>

<style module>
.button {
  background-color: #f00;color: #fff;
}
</style>