angular - 如何在 Angular 中安装 Bulma？

Question

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

我有角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

标签： angularbulma

Answer 1

请勿执行以下操作：

 "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";