如何为SharePoint现代版添加自定义CSS样式？

前提：你已将CSS文件上传至站点Assets文件夹 #

方法1：单页面快速注入（适合测试或局部页面自定义） #

这是最直接的方式，无需复杂工具：

• 打开需要自定义的SharePoint页面，点击右上角「编辑」
• 添加「嵌入」Web Part（在「文本和媒体」分类下）
• 在嵌入框中粘贴以下代码，替换为你的CSS文件的直接链接（右键Assets里的CSS文件→复制链接）：

  <style>
  @import url('https://你的租户地址.sharepoint.com/sites/你的内网站点/SiteAssets/你的自定义CSS文件名.css');
  </style>
  

• 保存页面，刷新后即可看到样式生效

方法2：全局站点生效（所有页面应用自定义样式） #

如果需要整个内网站点统一应用企业配色，用SPFx应用自定义器，步骤如下：

1. 先配置基础环境：安装Node.js（16.x版本适配性较好）和Yeoman SharePoint Generator
2. 打开命令行，运行以下命令创建扩展项目：

   yo @microsoft/sharepoint
   

   • 依次选择：Extension → Application Customizer → 填写项目名称、描述 → 选择No JavaScript framework
3. 找到生成的src/extensions/[你的扩展名称]/[你的扩展名称].ts文件，修改onInit方法：

   public async onInit(): Promise<void> {
     // 替换为你的CSS文件链接
     const cssUrl = "https://你的租户地址.sharepoint.com/sites/你的内网站点/SiteAssets/你的自定义CSS文件名.css";
     const head = document.getElementsByTagName("head")[0];
     const link = document.createElement("link");
     link.href = cssUrl;
     link.rel = "stylesheet";
     link.type = "text/css";
     head.appendChild(link);
     return Promise.resolve();
   }
   

4. 打包并部署：

   gulp bundle --ship
   gulp package-solution --ship
   

5. 将生成的.sppkg文件上传到租户应用目录，然后在目标站点中添加该应用，即可全局应用自定义CSS

经典版SharePoint额外方法 #

如果你的内网用的是经典模板，直接用脚本编辑器：

• 编辑页面，添加「脚本编辑器」Web Part
• 在编辑器中粘贴上述的@import代码，或直接写入CSS内容，保存即可

注意事项 #

• 确保CSS文件权限设置正确，站点所有成员都能访问Assets文件夹及其中的文件
• 自定义样式时，建议用浏览器F12开发者工具定位元素类名，避免使用过于宽泛的选择器，防止破坏默认页面布局

内容的提问来源于stack exchange，提问作者KennethMHill