如何在 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

Answer 1

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

步骤可以很简单，

1. 通过以下方式创建新的 Angular 应用程序 ng new angular-bulma

2. 将 bulma 添加到项目中npm install bulma

3. 更新angular.jsonbulma css 为

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

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