uniapp怎样引入公共css文件

在 UniApp 里引入公共 CSS 文件有多种方式，下面介绍常见的三种方法。一般而言，全局css如base、common可以直接用方法一，页面css可以用方法二，方法三只做参考，实际操作、后期维护都可能造成麻烦，不做推荐。
 

方法一：全局引入

全局引入公共 CSS 文件意味着该文件中的样式会应用到整个项目的所有页面。

步骤
创建公共 CSS 文件：在项目的 static 目录下创建一个名为 common.css 的文件，示例内容如下：

/* static/common.css */
body {
    font-family: Arial, sans-serif;
}

在 App.vue 中引入：
在 App.vue 的 <style> 标签里引入公共 CSS 文件。

<template>
    <view id="app">
        <!-- 页面内容 -->
    </view>
</template>

<style>
/* 引入公共 CSS 文件 */
@import "@/static/common.css";

/* 其他全局样式 */
#app {
    background-color: #f5f5f5;
}
</style>

在上述代码中，@ 符号代表项目的根目录，通过 @import 语句引入 static 目录下的 common.css 文件。
 

方法二：页面单独引入

如果你只希望某些页面应用公共 CSS 文件中的样式，可以在特定页面单独引入。
步骤
创建公共 CSS 文件：同样在 static 目录下创建 common.css 文件。

/* static/common.css */
.text-center {
    text-align: center;
}

在页面中引入：在需要应用这些样式的页面的 <style> 标签里引入公共 CSS 文件。

<template>
    <view class="text-center">
        <text>这是一个居中的文本</text>
    </view>
</template>

<style>
/* 引入公共 CSS 文件 */
@import "@/static/common.css";
</style>

 

方法三：使用 uni-app 的 style 配置

可以在 pages.json 中通过 style 配置来引入公共 CSS 文件。
步骤
创建公共 CSS 文件：创建 static/common.css 文件。

/* static/common.css */
button {
    border-radius: 5px;
}

在 pages.json 中配置：在 pages.json 里添加 globalStyle 字段，并在其中引入公共 CSS 文件。

{
    "globalStyle": {
        "navigationBarBackgroundColor": "#FFFFFF",
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "UniApp 项目",
        "backgroundColor": "#F8F8F8",
        "backgroundTextStyle": "light",
        "usingComponents": {},
        "style": "@/static/common.css"
    },
    "pages": [
        {
            "path": "pages/index/index",
            "style": {}
        }
    ]
}

通过以上配置，common.css 文件中的样式会应用到整个项目的页面。

以上就是在 UniApp 中引入公共 CSS 文件的常见方法，你可以根据项目的具体需求选择合适的方式。