如何在 Angular 中安装 Bulma？答案

【问题标题】：How do I install Bulma in Angular?如何在 Angular 中安装 Bulma？
【发布时间】：2020-07-23 02:53:59
【问题描述】：

我收到一个错误，安装 Bulma 后通过浏览器检查器可见

我有 angular-10。

我采取的步骤是

npm -i 布尔玛。 bulma 目录在 node_modules/bulma
npm i -D @creativebulma/bulma-collapsible

在 angular.json 中加载 javascript 为

"styles": [
        "src/styles.css",
        "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
        "./node_modules/bulma/css/bulma.css"
],

在组件css文件中加载css

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
@import '~bulma/css/bulma.css';

通过控制台的错误信息是

 Could not load content for http://localhost:4200/node_modules/bulma/css/bulma.css

【问题讨论】：

标签： angular bulma

【解决方案1】：

您多次加载 bulma.css，一次在 angular.json 和一次在 css 导入。

步骤可能很简单，

通过以下方式创建新的 Angular 应用程序 ng new angular-bulma
通过npm install bulma将bulma添加到项目中

为bulma css更新angular.json

 "styles": [
      "src/styles.scss",
      "node_modules/bulma/css/bulma.css"
 ],

【讨论】：

是的。诀窍是使用基本部分 class="hero" 进行测试，并查看 css 是否被应用

【解决方案2】：

不要做以下事情：

 "styles": [
  "src/styles.scss",
  "node_modules/bulma/css/bulma.css"
 ],

因为这将覆盖您在 src/style.scss 中所做的更改。而是这样做：

"styles": [
  "src/styles.scss"
 ]

并在 src/styles.scss 文件中将您的导入添加到文件的最后。例如：

@charset "utf-8";

$menu-item-color: red;
$text: red;
$menu-item-radius: red;
$radius-small: red;
$menu-item-hover-color: red;
$text-strong: red;
$menu-item-hover-background-color: red;
$background: red;
$menu-item-active-color: red;
$link-invert: red;
$menu-item-active-background-color: red;
$link: red;
$menu-list-border-left: red;
$menu-list-line-height: red;
$menu-list-link-padding: red;
$menu-nested-list-margin: red;
$menu-nested-list-padding-left: red;
$menu-label-color: red;
$text-light: red;
$menu-label-font-size: red;
$menu-label-letter-spacing: red;
$menu-label-spacin: red;

@import "../node_modules/bulma/bulma.sass";

【讨论】：

【解决方案3】：

 "styles": [
      "src/styles.scss",
      "node_modules/bulma/css/bulma.css"
 ],

这现在不起作用。您只能通过@import 'bulma/css/bulma.css';将bulma或bootstrap添加到styles.css

【讨论】：