在前端開發過程中，為了方便維護和提高代碼重用性，我們經常需要將一些相同或相似的CSS代碼整合在一起，封裝成一個共用的CSS文件。在Vue中，同樣可以實現共用CSS的配置，下面將詳細介紹具體的步驟。

首先，在我們的Vue項目中，需要先創建一個共用的CSS文件，建議將其放在src/assets/css/目錄下，這樣便于管理和查找。例如，我們可以創建一個名為common.css的文件，并將其中要共用的CSS樣式代碼寫入其中。

/* common.css */
.container {
margin: 0 auto;
max-width: 1200px;
padding: 0 20px;
}
.text-center {
text-align: center;
}

然后，我們需要在Vue項目中引入該共用CSS文件。可以在main.js中將其引入，并在Vue實例中設置樣式。

// 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')
// App.vue
<template>
<div class="container text-center">
<h1>This is my Vue project</h1>
</div>
</template>
<style scoped>
/* App.vue 樣式 */
</style>

如上所示，我們在App.vue組件中的模板中添加了一個class為container和text-center的div標簽，這兩個class的樣式均定義在了common.css中，所以我們只需要在模板中添加這兩個class即可。

需要注意的是，為了避免樣式沖突，我們通常在Vue組件中設置樣式時使用scoped屬性來限定樣式的作用范圍，確保只對當前組件有效。

除了在Vue組件中使用共用CSS文件的方法，我們還可以在Vue的webpack配置文件中進行配置，將CSS文件自動引入到所有的Vue組件中。具體步驟如下：

首先，通過npm在項目中安裝css-loader和style-loader這兩個依賴項。

npm install css-loader style-loader --save-dev

接著，在webpack.base.config.js中添加以下代碼：

module: {
rules: [
{
test: /\.css$/, // 匹配所有以.css結尾的文件
use: [
'style-loader',
'css-loader'
]
}
]
}

需要注意的是，在使用Vue CLI 3腳手架創建的項目中，webpack配置文件被隱藏在node_modules/@vue/cli-service/lib/config/目錄下，我們需要通過vue inspect命令來獲取其配置。

vue inspect --mode development --rules

運行以上命令可以獲取到webpack的配置信息，其中可以找到module.rules，將其復制到vue.config.js文件中，并在其中添加上述CSS loader的配置，即可在所有的Vue組件中自動引入CSS文件了。

以上就是關于Vue中配置共用CSS的詳細內容介紹。通過以上方法可以輕松地實現CSS代碼的重用，提高項目的開發效率和代碼的可維護性。