vue引入公用css

在Vue中引入公用的CSS样式有两种方法。

第一种是使用全局引入的方式，在项目的入口文件(main.js)中，通过import语句引入CSS文件，以确保CSS样式可以在整个项目中使用。例如：

import Vue from 'vue'
import App from './App.vue'
import './assets/css/common.css'

new Vue({
  render: h => h(App),
}).$mount('#app')

这样，`./assets/css/common.css`中定义的CSS样式就可以在整个项目的组件中使用了。

第二种是在需要使用公用CSS样式的组件中，使用import语句引入CSS文件。在需要使用CSS样式的组件的`<style>`标签中，使用`@import`引入CSS文件。例如：

<template>
  <div>
    <!-- 组件内容 -->
  </div>
</template>

<script>
import './assets/css/common.css'

export default {
  // 组件逻辑
}
</script>

<style>
/* 其他样式 */
</style>

这样，组件中定义的样式和公用CSS样式可以共同生效。

无论选择哪种方式引入公用CSS，都可以使得CSS样式在整个项目中重用，提高代码的复用性和开发效率。