如何将 bootstrap 添加到 Sharepoint spfx webpart？

Question

问题

如何将 bootstrap 和 react-bootstrap 添加到我的自定义 SPFX Webpart？

我采取的步骤

添加bootstrap、react-bootstrap和@types/bootstrap
用my scss file
将 scss 文件导入我的应用程序

有什么问题？

目前自定义 Web 部件未构建并退出并出现错误我无能为力。没有缺少分号。

此行导致错误：@import "~bootstrap/scss/bootstrap"

因为我想覆盖某些默认的 sass bootstrap 变量，所以我必须加载 bootstrap 秒。使用 Sharepoint 的 spcomponentloader 这是不可能的。

Bootstrap css 使用以下代码可以很好地加载，但是我的变量没有被考虑在内，因为加载在第二位。

SPComponentLoader.loadCss("https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css");

错误

 exited with code 2
Error - [webpack] 'dist':
./lib/webparts/webpartDgdmHelloworld/components/Theme.module.css (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src??postcss!./lib/webparts/webpartDgdmHelloworld/components/Theme.module.css)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
SyntaxError
(40:4) Missed semicolon
 @ ./lib/webparts/webpartDgdmHelloworld/components/Theme.module.css 1:14-155
 @ ./lib/webparts/webpartDgdmHelloworld/components/Theme.module.scss.js
 @ ./lib/webparts/webpartDgdmHelloworld/components/WebpartDgdmHelloworld.js
 @ ./lib/webparts/webpartDgdmHelloworld/WebpartDgdmHelloworldWebPart.js

在我的 SPFX webpart 中尝试使用 react-bootstrap 时也会发生同样的情况。导入时出现以下情况：

Error - [tsc] node_modules/@popperjs/core/lib/createPopper.d.ts(1,73): error TS1005: ';' expected.
Error - [tsc] node_modules/@popperjs/core/lib/modifiers/applyStyles.d.ts(1,13): error TS1005: '=' expected.

Answer 1

你的bootstrap主题文件不是模块，需要直接编译（去掉.module.那个东西）。意思是，将 Theme.module.scss 重命名为 Theme.scss。这可能会显示警告，忽略它 - 在您的情况下没关系，您不使用模块。

简单地导入它：import './Theme.scss'

应该可以。在你的情况下可能不需要 SPComponentLoader。

关于react-bootstrap，则是另外一回事了。它与 typescript 3.9 兼容，SPFx 正在使用开箱即用的 typescript 3.7。最简单的方法可能是将 SPFx 升级为使用 3.9 而不是 3.7。为此：

> npm uninstall -D @microsoft/rush-stack-compiler-3.7
> npm install -D @microsoft/rush-stack-compiler-3.9

然后修改tsconfig中的一行：

  "extends": ..../rush-stack-compiler-3.7/",

与：

  "extends": ..../rush-stack-compiler-3.9/",

请记住，这不受 Microsoft 支持（他们仅支持经过正确测试的内容），因此您基本上只能靠自己了。

如何将 bootstrap 添加到 Sharepoint spfx webpart？

How to add bootstrap to sharepoint spfx webpart?

sharepoint

reactjs

spfx

问题

我采取的步骤

有什么问题？