在前端開發中，我們常常使用一些框架來開發我們的項目。而mpvue是一種特別適用于小程序開發的框架，它和Vue的語法十分相似。如果我們希望在mpvue中使用全局CSS，應該如何操作呢？

首先，我們需要在項目的根目錄下新建一個

App.vue

文件。在該文件中，我們可以使用

style

標簽添加全局CSS樣式。如下所示：

<template>
<div class="container">
<router-view />
</div>
</template>
<style lang="less">
@import "@/styles/main.less";
.container {
width: 100%;
height: 100%;
}
</style>

在

style

標簽中，我們可以使用

@import

標簽來引入我們封裝好的樣式文件。此外，我們還可以定義一些全局樣式，如上述例子中定義的

.container

樣式。

但需要注意，全局樣式只對根組件有效，對子組件不生效。如需在子組件中使用全局樣式，可以使用

scoped

屬性來處理。在模板中使用

scoped

，可以確保樣式只在當前組件中生效。如下所示：

<template>
<div>
<div class="container">
<p>這是根組件的文字</p>
<HelloWorld />
</div>
</div>
</template>
<style lang="less" scoped>
@import "@/styles/main.less";
.container {
width: 100%;
height: 100%;
}
p {
font-size: 16px;
}
</style>

在

style

標簽中，我們添加了

scoped

屬性，聲明該樣式只對當前組件有效。如此，在

<p>

標簽中的文字樣式只對根組件中的

<p>

標簽生效，不影響子組件內部的樣式。

以上就是在mpvue中使用全局CSS的方法，希望這篇文章可以幫助到您。