“SassError未定义变量”，带Angular 9和Bootstrap 4开箱即用

smtd7mpg 于 2023-02-01 发布在 Bootstrap

关注(0)|答案(3)|浏览(231)

之前我使用了带Bootstrap 4的Angular 8，并使用这个优秀的答案来访问Bootstrap变量. https://stackoverflow.com/a/40070580/1061602。
我似乎不能得到这个工作与Angular 9。
步骤：
1.使用Angular CLI生成新项目，选择SCSS
1.通过npm安装 Bootstrap 4、JQuery、Popper.js
1.在styles.scss中，输入以下内容：
html { background: $success-bg; }
1.运行ng b以生成
现在您将获得SassError: Undefined variable

- 问：在SCSS级别导入Bootstrap 4需要什么导入，并且还可以使用变量**

我已经尝试了以下组合：
@import "~bootstrap/scss/bootstrap";
@import "~bootstrap/scss/_variables";
@import "~bootstrap/scss/_variables.scss";
@import "../node_modules/bootstrap/scss/_variables.scss";
@import "../node_modules/bootstrap/scss/variables";
例如

我试着设置一个StackBlitz，但找不到一种方法来获得Angular 9，SCSS， Bootstrap 4都设置好了，它是抱怨CSS而不是SCSS。
一般来说，Bootstrap是有效的。实用程序类是有效的。我可以使用mixin。我可以毫无问题地重新定义变量。我只是不能用这种方式使用现有的BS4变量。

twitter-bootstrap

来源：https://stackoverflow.com/questions/60948890/sasserror-undefined-variable-with-angular-9-and-bootstrap-4-out-of-the-box

3条答案

按热度按时间

mfuanj7w1#

您可能放置了一个不存在的变量。
转到 Bootstrap 的变量文件（如果使用npm安装，则在node_modules中;如果手动下载，则在任何文件夹中），它的名称通常为_variables. scss。
然后找到您想要在代码中重用的变量。

赞(0）回复(0）举报 2023-02-01

fsi0uk1n2#

在使用之前必须导入变量，我使用以下设置

// Required Bootstrap partials
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";

html { background: $success-bg; }

// Optional (Add components according to your use)
@import "node_modules/bootstrap/scss/reboot";
@import "node_modules/bootstrap/scss/alert";
@import "node_modules/bootstrap/scss/buttons";

赞(0）回复(0）举报 2023-02-01

bogh5gae3#

这“可能”不是导入问题。我认为“background”变量实际上没有在您的."/variables/scss“文件中定义。您可以尝试打开该文件，然后像这样声明变量;$背景：属性值;
我在网上弄了一个bootstrap模板，它也给了我一个类似的错误，但是用了一个变量$白色，它把颜色设置为白色，所以我必须定义这个变量，并把它赋值为color white，我希望它能有所帮助。

赞(0）回复(0）举报 2023-02-01

我来回答

“SassError未定义变量”，带Angular 9和Bootstrap 4开箱即用

3条答案

相关问题

热门标签

最新问答