在Vue項目中，我們經(jīng)常會碰到需要在多個組件中使用相同的CSS樣式的情況。這時，我們可以將這些共用的CSS樣式提取出來，創(chuàng)建一個公共CSS文件，并將其應(yīng)用到所有需要的組件中。這樣可以大大提高代碼的復用性和可維護性。

/* 公共CSS文件：common.css */
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.primary-button {
display: inline-block;
padding: 12px 24px;
background-color: #42b983;
color: #fff;
border-radius: 4px;
cursor: pointer;
}

在Vue項目中引入公共CSS文件的方式有多種，下面介紹兩種常見的方式。

一種方式是在Vue組件中使用

這種方式的優(yōu)點是比較靈活，可以根據(jù)需要在每個組件中選擇引入需要的公共CSS文件，也可以在組件級別上對公共CSS文件做一些定制化的修改。缺點是當項目中存在大量的組件時，每個組件都需要引入公共CSS文件會顯得比較繁瑣。

另一種方式是在Vue項目的入口文件（比如main.js）中直接引入公共CSS文件：

// main.js
import Vue from 'vue';
import App from './App.vue';
import "@/assets/css/common.css";
Vue.config.productionTip = false;
new Vue({
render: h =>h(App),
}).$mount('#app');

這種方式的優(yōu)點是比較簡單明了，所有的組件都可以直接使用公共CSS文件中的樣式，無需重復引入。缺點是所有的組件都會受到公共CSS文件的影響，而且如果公共CSS文件較大，可能會對網(wǎng)頁的加載速度產(chǎn)生一定的影響。

除了上述兩種方式外，還可以使用Vue的樣式作用域（scoped）屬性來限定公共CSS樣式僅在某個組件中生效，避免樣式污染。具體使用方法可以參考Vue官方文檔。

總之，使用公共CSS是Vue開發(fā)中的一項基本技能，熟練掌握這一技能可以提高代碼的復用性和可維護性，減少工作量和代碼開發(fā)時間。