css - 如何使用 Angular 8 更改 Bulma.io 变量的值
问题描述
我Bulma.io
在一个Angular 8
项目中使用,我已经用这个命令安装了 Bulma npm install bulma
:之后,我将样式包含在我的angular.json
文件中:
"styles": [
"src/styles.css",
"node_modules/bulma/css/bulma.css"
],
"stylePreprocessorOptions": {
"includePaths":
"node_modules",
"node_modules/bulma/sass/utilities"
]
},
我可以使用,Bulma
但我不能覆盖变量来更改,例如,a 的背景颜色navbar
。这是我的scss
文件,它覆盖了background-color
a navbar
:
@import 'horizontal-navbar.component.css';
@import 'initial-variables';
@import "functions";
@import "bulma";
$navbar-background-color: #fff;
我究竟做错了什么?提前致谢。
解决方案
我们可以像使用 node sass 一样导入它
首先保存bulma
包
npm install bulma --save
然后转到style.scss
并给出以下代码
// Set your brand colors
$purple: #8a4d76;
$pink: #fa7c91;
$brown: #757763;
$beige-light: #d0d1cd;
$beige-lighter: #eff0eb;
// Update Bulma's global variables
$family-sans-serif: 'Nunito', sans-serif;
$grey-dark: $brown;
$grey-light: $beige-light;
$primary: $purple;
$link: $pink;
$widescreen-enabled: false;
$fullhd-enabled: false;
// Update some of Bulma's component variables
// $body-background-color: $beige-lighter;
$body-background-color: #fff;
$control-border-width: 2px;
$input-border-color: transparent;
$input-shadow: none;
// Import only what you need from Bulma
@import '~node_modules/bulma/sass/utilities/_all';
@import '~node_modules/bulma/sass/base/_all';
@import '~node_modules/bulma/sass/elements/button';
@import '~node_modules/bulma/sass/elements/container';
@import '~node_modules/bulma/sass/elements/title';
@import '~node_modules/bulma/sass/form/_all';
@import '~node_modules/bulma/sass/components/navbar';
@import '~node_modules/bulma/sass/layout/hero';
@import '~node_modules/bulma/sass/layout/section';
我从https://bulma.io/documentation/customize/with-node-sass/拿了这个例子
推荐阅读
- ocaml - 此表达式具有单元类型,但表达式应为字符串类型
- reactjs - 如何使用是的验证 firstName 中的每个字符?
- c# - .net core 3.0 使用 Policy、AuthenticationSchemes 授权属性
- pandas - 大熊猫中日期时间列的分组最后值
- string - Google Scripts 错误 SyntaxError: Unexpected token < (line 119, file "Code")
- python - 如何将shell输出转换为python字典
- java - 在java中将拉丁语1补充unicode转换为字符串
- macos - 从启动服务中隐藏 NSDocument 子类
- excel - 复制参数不适用于 Range 对象
- docker - docker容器之间的连接作为本地主机