[英]How to add bootstrap to sharepoint spfx webpart?
How can I add bootstrap and react-bootstrap to my custom SPFX Webpart?如何将 bootstrap 和 react-bootstrap 添加到我的自定义 SPFX Webpart?
Currently the custom webpart is not building and exits with an error I can't do nothing with.目前,自定义 Web 部件未构建并退出并出现错误,我无能为力。 There is no semicolon missing.没有缺少分号。
This line is causing the error: @import "~bootstrap/scss/bootstrap"此行导致错误: @import "~bootstrap/scss/bootstrap"
Because I would like to overwrite certain default sass bootstrap variables I have to load bootstrap second.因为我想覆盖某些默认 sass 引导变量,所以我必须加载引导程序第二个。 With Sharepoint's spcomponentloader this is not really possible.使用 Sharepoint 的spcomponentloader这是不可能的。
Bootstrap css loads fine with the following code, however my variables are not taken into consideration cause there are loaded on second place. Bootstrap css 可以使用以下代码正常加载,但是我的变量没有被考虑在内,因为加载在第二位。
SPComponentLoader.loadCss("https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css");
Error错误
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
Same happens when trying to use react-bootstrap in my SPFX webpart.尝试在我的 SPFX webpart 中使用 react-bootstrap 时也会发生同样的情况。 The following occurs when importing it:导入时会出现以下情况:
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.
Your bootstrap theme file is not a module, you need to compile it directly (remove the .module.
thing).您的引导主题文件不是模块,您需要直接编译它(删除.module.
东西)。 Means, rename Theme.module.scss
to Theme.scss
.意味着,将Theme.module.scss
重命名为Theme.scss
。 This may show a warning, ignore it - it's okay in your case, you don't use modules.这可能会显示警告,请忽略它-在您的情况下没关系,您不使用模块。
Import it simply with: import './Theme.scss'
只需使用以下命令导入它: import './Theme.scss'
That should do.应该这样做。 Probably there is no need for SPComponentLoader
in your case.在您的情况下,可能不需要SPComponentLoader
。
Regarding the react-bootstrap
, it's a different story.关于react-bootstrap
,这是一个不同的故事。 It is compatible with typescript 3.9, SPFx is using typescript 3.7 out of the box.它与 typescript 3.9 兼容,SPFx 使用的是开箱即用的 typescript 3.7。 The easiest may be to upgrade your SPFx to use 3.9 instead of 3.7.最简单的可能是将您的 SPFx 升级为使用 3.9 而不是 3.7。 To do so:为此:
> npm uninstall -D @microsoft/rush-stack-compiler-3.7
> npm install -D @microsoft/rush-stack-compiler-3.9
Then modify the line in tsconfig:然后修改tsconfig中的那一行:
"extends": ..../rush-stack-compiler-3.7/",
with:和:
"extends": ..../rush-stack-compiler-3.9/",
Keep in mind that this is not supported by Microsoft (they support only what they have tested properly), so you are basically on your own here.请记住,Microsoft 不支持此功能(它们仅支持已正确测试的内容),因此您基本上只能靠自己。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.