如何在 Angular 中安装 Bulma？

Question

安装 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

Answer 1

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

步骤可以很简单，

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

更新布尔玛 css 的 angular.json

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

Answer 2

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

这现在不起作用。您只能通过 @import 'bulma/css/bulma.css';

将 bulma 或 bootstrap 添加到 styles.css

Answer 3

请勿执行以下操作：

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

如何在 Angular 中安装 Bulma？

How do I install Bulma in Angular?

angular

bulma