我还没有找到另一个已经回答的问题。我已经看过这个的描述页面并遵循那里的指令。
因此,在我实际定义自定义引导程序的 Scss 文件夹中,我创建了一个新的标签输入主题并在其中导入了其核心样式
@import "../../../../node_modules/ng2-tag-input/dist/modules/core/styles/core/_core.scss";
我也在这样的组件中添加了我的主题名称。
@Component({
selector: 'tags',
moduleId: module.id,
template: `
<tag-input [(ngModel)]="tags"
(onSelect)="onSelectedTag($event)"
[theme]="'ark-tag-theme'"
[placeholder]="placeHolderKey | translate"
[secondaryPlaceholder]="placeHolderKey | translate"
[inputClass]="'input-of-tag-area-class'"
(onAdd)="onTagAdded($event)"
[addOnBlur]='true'
[editable]='true'
(onRemove)="onTagRemoved($event)"
(onTagEdited)="onTagEdited($event)"
[focusFirstElement]="true"
[trimTags]="true"
[errorMessages]="errorMessages"
[validators]="validators"
[separatorKeyCodes]="[32,188]"
[ngModelOptions]="{ standalone: false }" #input>
</tag-input>
`
})
这完全是我的 scss 文件
@import "../../../../node_modules/ng2-tag-input/dist/modules/core/styles/core/_core.scss";
$ark-theme:(
background-color: theme-color("secondary")
);
$ark-tag-theme: (
background: theme-color("secondary"),
background-focused: theme-color("secondary"),
background-active: theme-color("secondary"),
background-hover: theme-color("secondary"),
color: #fff,
color-hover: #fff,
border-radius: 2px
);
::ng-deep .ng2-tag-input.ark-tag-theme{
@include tag-theme($ark-theme);
}
::ng-deep .ng2-tag-input.ark-tag-theme tag{
@include tag-theme($ark-tag-theme);
}
这也是我的自定义引导程序设置
@import '../../../../node_modules/angular2-toaster/toaster';
// Core variables and mixins
@import "../../../../node_modules/bootstrap/scss/functions";
@import "variables-ark";
@import "../../../../node_modules/bootstrap/scss/bootstrap";
// Reset and dependencies
@import "glyphicons";
@import "ark-tag-theme";
@import "app";
@import "theme";
好的,我在组件的初始 div 处获得了新的 ark-tag-theme 类,但其他所有内容仍然读取 setup bootstrap3 并且我的任何类都没有读取标签。我也使用 /deep/ 而不是 ng-deep 但结果相同。由于输入组件在 node_modules 中,我确信无论如何我都不应该在那里做任何事情,因为它总是被覆盖。
WI 也在 firefox 中尝试过,因为我听说 chrome 不尊重 ng-deep。那么如何让我的类读取输入标签?
好的,我设法做到了,我的错误不是scss
从组件中引用文件并将其作为 bootstrap sass 链的一部分并使用应用程序 cli 加载它。所以我ark-theme.scss
从引导程序中获取了文件。把它放在标签输入组件所在的公共组件文件夹中。并从组件内部加载它,就像任何用于组件封装的 css 文件一样。
我不仅要导入 ngx-chips 核心,还要导入函数和自定义变量,或者引导变量文件。
@import "~ngx-chips/dist/modules/core/styles/core/core";
@import "~bootstrap/scss/functions";
@import "~assets/sass/_variables-ark.scss";
$ark-theme:(
background-color: theme-color("secondary")!important
);
$ark-tag-theme: (
background: theme-color("secondary"),
background-focused: theme-color("secondary"),
background-active: theme-color("secondary"),
background-hover: theme-color("secondary"),
color: #fff,
color-hover: #fff,
border-radius: 2px
);
:host ::ng-deep .ng2-tag-input.ark-tag-theme{
@include tag-theme($ark-theme);
}
:host ::ng-deep .ng2-tag-input.ark-tag-theme tag{
@include tag-theme($ark-tag-theme);
}
就是这样。无需增加特异性。这样我就可以在定义主题时使用我自己的变量和函数。另外,我有此组件的副本,用于电子邮件添加/删除功能,因此我实际上可以重用该scss
文件。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句