uniapp common.css
时间: 2025-06-22 16:45:37 浏览: 10
### UniApp 中 `common.css` 文件的内容、规范及使用方法
#### 1. Common CSS 文件的作用
在 UniApp 项目中,`common.css` 是用于存放通用样式的文件。该文件中的样式可以被整个应用程序的不同页面共享,从而保持一致的设计风格并减少重复代码[^2]。
#### 2. Common CSS 文件的位置
通常情况下,`common.css` 文件位于项目的根目录下的 `common` 文件夹内,或者是放置于其他约定俗成的公共资源位置。如果按照标准结构来构建,则可能是如下路径:
```plaintext
project-root/
├── common/
│ └── common.css
```
#### 3. Common CSS 文件的具体内容
以下是 `common.css` 文件可能包含的一些典型样式规则示例:
```css
/* 定义全局字体 */
body {
font-family: 'Arial', sans-serif;
}
/* 设置按钮的基础样式 */
button {
background-color: #007bff;
color: white;
border-radius: 4px;
padding: 8px 16px;
cursor: pointer;
}
/* 自定义类名以供特定场景使用 */
.custom-class {
margin-bottom: 20px;
}
```
这些样式可以通过引入方式应用于所有页面或部分指定页面中。
#### 4. 使用方法
为了使上述样式生效,可以在 `App.vue` 或者任意 `.vue` 单文件组件内的 `<style>` 标签处通过 `@import` 来加载这个外部CSS文件:
```html
<style>
@import './common/common.css';
</style>
```
另外一种做法是在 `main.js` 中统一引入一次即可让其影响到全部子视图:
```javascript
// main.js
import Vue from 'vue'
import App from './App'
// 引入全局样式表
require('@/common/common.css')
new Vue({
render: h => h(App),
}).$mount('#app')
```
需要注意的是,在实际开发过程中更推荐利用 SCSS/SASS 等预处理器以及 `uni.scss` 提供的功能来进行更加灵活高效的样式管理[^1]。
阅读全文
相关推荐


















