如何在 Sharepoint Server 2019 上使用 SPFX 將 CSS 或 JavaScript 注入 SharePoint Modern 頁面

Question

我們在 Sharepoint Server 2019 上使用 Sharepoint Modern 通信站點。我的任務是自定義頁眉的開箱即用模板並添加頁腳。 我正在玩弄使用https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-application-injectcss但我無法讓它工作。 當我將 SPPKG 文件部署到 Sharepoint Server 2019 應用程序時，它會引發以下錯誤。

驗證應用程序清單時出錯。：Xml 驗證異常：'未聲明'IsDomainIsolated' 屬性。' 在“1”行，位置“322”。

請幫忙。 謝謝

Answer 1

您必須創建新項目，因為該示例使用的是 spfx 1.8.0。 對於 SharePoint 2019，您必須使用 spfx ~1.4.0。

我有自己的 ApplicationCustomizer，里面有自定義 css，用於打造 ShP 2019 品牌。

import { override } from '@microsoft/decorators';
import { Log } from '@microsoft/sp-core-library';
import { BaseApplicationCustomizer } from '@microsoft/sp-application-base';
import * as $ from 'jquery';
import styles from './css/styles.module.scss';
require('./css/styles.module.scss');

export default class BrandingApplicationCustomizer extends BaseApplicationCustomizer<{}> {
  @override
  public async onInit(): Promise<any> {
    try {
      await this.wait('.o365cs-nav-centerAlign');
      if (window.screen.availWidth < 639) {
        $('.o365cs-nav-centerAlign').css({"height":"50px", "cursor":"pointer", "background":"url(https://.../_layouts/15/Intranet.Design/Img/_intranet_logo.png) no-repeat left center"});
    $('.o365cs-nav-centerAlign').click(function() {
      window.location.href = 'https://intranet';
    });
  } else {
    $('.o365cs-nav-centerAlign').html(`
    <div class=` + styles.brandingMainDiv + `>
      <a href='https://intranet' style='line-height: 46px;'>
        <img src='https://intranet./_layouts/15/Intranet.Design/Img/_intranet_logo.png' style='margin: auto;vertical-align: middle;display: inline-block;'/>
      </a>
      <div style='margin-left:15px;border-left:1px solid white;'></div>
      <a href='` + this.context.pageContext.web.absoluteUrl + `'>
        <div style='font-family: Segoe UI Regular WestEuropean,Segoe UI,Tahoma,Arial,sans-serif;line-height: 40px;display: inline-block;font-size: 20px;-webkit-font-smoothing: antialiased;margin: 0px 0 0 25px;vertical-align: top;font-weight: bold;color:white;'>
        ` + this.context.pageContext.web.title + `</div></a></div>
     `);
     }
    } catch (error) {
};
return Promise.resolve();
  }
   private wait = (selector) => {
    return new Promise((resolve, reject) => {
  const waitForEl = (selector, count = 0) => {
    const el = $(selector);
    if (el.length > 0) {
      resolve(el);
    } else {
      setTimeout(() => {
        count++;
        if (count < 1000) {
          waitForEl(selector, count);
        } else {
          reject('Error: More than 1000 attempts to wait for element');
        }
      }, 100);
    }
  };
  waitForEl(selector);
    });
  }
}

CSS看起來像這樣（在scss中你需要使用全局屬性）：

:global {
.CanvasZone,
.SPCanvas-canvas {
    max-width: none !important;
}
button[data-automation-id="pageCommandBarNewButton"] {
    display: none !important;
}
body, /* entire body*/
.ms-Nav, /*left navigation pane background*/
#spPageChromeAppDiv /* whole page again*/
{
    background-color: #eeece1  !important;
}
.o365cs-base.o365cs-topnavBGColor-2, /* top bar*/
.o365cs-base .o365cs-nav-rightMenus /* top bar menu right*/
{
    background-color: #17375e !important;
}
#O365_MainLink_Help,
#O365_NavHeader button#O365_MainLink_NavMenu,
#O365_NavHeader button#O365_MainLink_NavMenu_Responsive,
.o365button.o365cs-nav-appTitle.o365cs-topnavText,
.o365cs-nav-topItem.o365cs-rsp-m-hide.o365cs-rsp-tn-hideIfAffordanceOn,
.o365button .o365cs-nav-brandingText,
.o365cs-nav-brandingText /* Top bar Sharepoint text*/
{
    display: none !important;
}