vue如何引入公共样式

Vue引入公共样式可以通过以下4种方式：1、在main.js文件中引入；2、在组件中使用@import引入；3、在组件中使用style标签引入；4、在vue.config.js中配置全局样式。 这些方法适用于不同的场景，可以根据项目的需求选择合适的引入方式。以下是详细的描述和使用场景分析。

一、在main.js文件中引入

在main.js文件中引入公共样式是最直接的方法之一。这种方法适用于全局样式或重置样式的引入。

// main.js

import Vue from 'vue';
import App from './App.vue';
import './assets/styles/global.css'; // 引入全局样式
new Vue({
  render: h => h(App),
}).$mount('#app');

解释和背景信息：

1. 全局生效：在main.js中引入的样式会在整个应用中生效，无需在每个组件中单独引入。
2. 适用场景：适用于需要在整个应用中保持统一样式的情况，如重置样式、全局字体设置等。
3. 注意事项：要确保路径和文件名的正确性，否则会导致样式无法加载。

二、在组件中使用@import引入

在单个Vue组件的