在Vue項(xiàng)目中，我們可以使用單文件組件（SFC）來(lái)組織我們的代碼，但是如何在.vue文件中引入css呢？下面就是詳細(xì)的步驟。

第一步，我們需要在.vue文件中的<template>標(biāo)簽中添加<style>標(biāo)簽來(lái)定義樣式，如下所示：

<template>
<div>
<p>Hello World!</p>
</div>
<style>
/* 這里定義我們的樣式 */
</style>
</template>

第二步，在<style>標(biāo)簽中定義的樣式是針對(duì)當(dāng)前組件內(nèi)的，如果我們想在其他組件中也應(yīng)用這些樣式，我們需要使用@import關(guān)鍵字來(lái)引入外部的css文件。例如：

<template>
<div class="my-class">
<p>Hello World!</p>
</div>
<style>
/* 引入外部css文件 */
@import './assets/my-styles.css';
/* 這里定義我們的樣式 */
.my-class {
font-size: 16px;
color: #333;
}
</style>
</template>

第三步，我們需要在項(xiàng)目的vue.config.js文件中配置樣式文件的loader，可以使用css-loader和style-loader，如下所示：

module.exports = {
chainWebpack: config => {
config.module
.rule('css')
.test(/\.css$/)
.use(['css-loader', 'style-loader'])
.loader('style-loader')
.loader('css-loader')
.end()
}
}

最后需要注意的是，當(dāng)我們使用scoped屬性給<style>標(biāo)簽加上作用域時(shí)，外部引入的樣式也會(huì)被限制在當(dāng)前組件內(nèi)部，避免了樣式污染的問(wèn)題。所以在Vue項(xiàng)目中引入css樣式，要根據(jù)實(shí)際情況選擇是否需要scoped屬性。