在多页面项目开发中，重复编写相同的CSS样式会造成代码冗余，还会增加后期样式维护的成本，不同页面共用一份CSS样式是优化开发流程的有效方式。实现CSS全局样式配置的方法有很多，开发者可以根据项目类型选择合适的方案。
原生CSS引入公共样式文件
最基础的共用样式方式是在每个页面的<head>标签中引入同一个公共CSS文件，公共文件中定义的样式会被所有引入的页面生效。
首先创建公共样式文件common.css，写入需要共用的全局样式：
/* 公共基础样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Microsoft YaHei", sans-serif;
font-size: 14px;
color: #333;
}
/* 公共组件样式 */
.btn {
padding: 8px 16px;
border: none;
border-radius: 4px;
cursor: pointer;
}
.btn-primary {
background-color: #409eff;
color: #fff;
}
然后在每个页面的<head>中引入该文件：
<head> <link rel="stylesheet" href="common.css"> <link rel="stylesheet" href="page-specific.css"> </head>
这种方式适合小型项目或者原生多页面项目，实现简单但缺乏变量和混合样式的支持，后期维护大量全局样式时会比较繁琐。
CSS预处理器配置全局样式
使用Sass、Less等CSS预处理器可以更灵活地管理全局样式，支持定义全局变量、混合样式、全局函数等，减少重复代码。
Sass全局配置示例
先创建全局变量文件_variables.scss和全局混合文件_mixins.scss：
/* _variables.scss 全局变量 */
$primary-color: #409eff;
$font-size-base: 14px;
$margin-base: 16px;
/* _mixins.scss 全局混合 */
@mixin flex-center {
display: flex;
justify-content: center;
align-items: center;
}
@mixin text-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
然后在每个页面的样式文件中引入全局文件，就可以使用这些变量和混合：
/* page1.scss */
@import "./variables";
@import "./mixins";
.page-header {
color: $primary-color;
font-size: $font-size-base + 2px;
@include flex-center;
}
如果使用构建工具如Webpack，可以配置预处理器自动引入全局文件，不需要在每个样式文件中手动写引入语句：
// webpack.config.js 中sass-loader配置
module.exports = {
module: {
rules: [
{
test: /.scss$/,
use: [
"style-loader",
"css-loader",
{
loader: "sass-loader",
options: {
additionalData: `@import "./src/styles/variables";@import "./src/styles/mixins";`
}
}
]
}
]
}
};
前端框架内置全局样式方案
主流前端框架都提供了内置的全局样式管理方式，适配框架的项目结构，使用起来更便捷。
Vue项目全局样式配置
在Vue项目中，可以在main.js中直接引入全局CSS文件，该样式会对所有组件生效：
// main.js
import Vue from "vue";
import App from "./App.vue";
// 引入全局样式
import "./styles/global.css";
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
如果需要使用Sass全局变量，还需要在vue.config.js中配置Sass的全局引入：
// vue.config.js
module.exports = {
css: {
loaderOptions: {
scss: {
additionalData: `@import "~@/styles/variables.scss";`
}
}
}
};
React项目全局样式配置
在React项目中，可以在入口文件index.js中引入全局样式文件：
// index.js
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
// 引入全局样式
import "./styles/global.css";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
如果使用CSS Modules，可以在src/index.css中定义全局样式，然后通过:global语法确保样式不被模块化处理：
/* index.css */
:global(body) {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
:global(.global-btn) {
padding: 8px 16px;
background-color: #1677ff;
color: #fff;
border: none;
border-radius: 4px;
}
全局样式使用注意事项
- 避免全局样式命名冲突，建议给全局样式添加统一前缀，比如
g-，减少和其他页面局部样式的冲突概率。 - 全局样式只放通用基础样式、公共组件样式，页面独有的样式不要放到全局文件中，避免样式冗余和污染。
- 定期整理全局样式文件，删除不再使用的样式，避免全局样式文件越来越大，影响页面加载速度。