Vue cli是基于Node.js的命令行工具，用于快速搭建Vue項目的一款工具。在Vue項目中，我們經(jīng)常會遇到全局樣式的問題，本文將詳細(xì)介紹在Vue cli中如何引入全局樣式。

在Vue cli項目中，我們可以使用以下兩種方式引入全局樣式：

// 方式一：在main.js中引用
import Vue from 'vue'
import App from './App.vue'
import './assets/css/global.css'
Vue.config.productionTip = false
new Vue({
render: h =>h(App),
}).$mount('#app')

// 方式二：在vue.config.js中設(shè)置
module.exports = {
css: {
loaderOptions: {
sass: {
prependData: `
@import "@/assets/css/global.scss";
`
}
}
}
}

第一種方式是將全局樣式文件引用到Vue項目的根組件中，第二種方式是通過配置Vue項目的Sass預(yù)處理器，來自動引入全局樣式文件。

在全局樣式文件中，我們可以定義頁面公共樣式、顏色變量、字體樣式等，為整個Vue項目提供一致性的視覺效果。

除了引用全局樣式文件外，我們還可以在Vue組件中局部設(shè)置樣式。Vue cli默認(rèn)支持了當(dāng)前流行的CSS預(yù)處理器：Sass、Less和Stylus，方便我們在樣式文件中使用變量、函數(shù)和混合器等特性。

需要注意的是，全局樣式文件的加載順序是在組件樣式之前，所以全局樣式文件中定義的類名可以被組件樣式所覆蓋。

總結(jié)一下，在Vue cli中引用全局樣式的方式有兩種：在main.js中引用或者在vue.config.js中進(jìn)行配置。全局樣式文件中通常定義頁面公共樣式、顏色變量和字體樣式等。此外，在Vue組件中也可以使用局部樣式和CSS預(yù)處理器。需要注意的是，全局樣式文件的加載順序在組件樣式之前。