在Vue項(xiàng)目中，我們經(jīng)常需要添加CSS樣式。使用Vue cli工具來(lái)管理和開發(fā)Vue.js項(xiàng)目時(shí)，我們可以使用不同的方法來(lái)引入CSS。在這篇文章中，我們將學(xué)習(xí)如何使用Vue cli來(lái)引入CSS文件。

使用Vue cli的優(yōu)點(diǎn)之一是，在項(xiàng)目創(chuàng)建期間，Vue cli自動(dòng)幫助我們安裝了許多常用的插件和庫(kù)。其中，Vue cli還為我們創(chuàng)建了一個(gè)基礎(chǔ)的打包環(huán)境。這意味著，在我們引入CSS文件時(shí)，Vue cli會(huì)自動(dòng)進(jìn)行編譯和打包。

在Vue項(xiàng)目中，通常可以使用以下幾種方式來(lái)引入CSS文件:
1. 在單個(gè)組件中引入CSS文件。
在template標(biāo)簽或者style標(biāo)簽中，使用@import語(yǔ)句引入CSS文件。
2. 在全局中引入CSS文件。
使用Vue cli中的webpack配置文件，可以在整個(gè)項(xiàng)目中注入CSS文件。

對(duì)于第一種方式，我們可以在某個(gè)Vue組件的template或者style標(biāo)簽中，按以下方式引入CSS文件:

<style lang="scss">
@import '~/styles/_variables.scss';
@import '~/styles/_mixins.scss';
/* 此處編寫本組件的CSS樣式 */
</style>

對(duì)于第二種方式，我們需要在webpack的配置文件中注入CSS文件:

// webpack.config.js
module.exports = {
// ...
chainWebpack: config =>{
// 添加全局scss文件
config.module
.rule('scss')
.use('sass-resources-loader')
.loader('sass-resources-loader')
.options({
resources: [
'./src/styles/_variables.scss',
'./src/styles/_mixins.scss'
]
});
}
};

這是一個(gè)簡(jiǎn)單的例子。如果你想了解更多關(guān)于使用Vue cli引入CSS文件的內(nèi)容，可以參考Vue官方文檔。