Vue.js，引导，自定义_rowVariant颜色（custom.scss）

我希望能够在vue中将自定义颜色作为背景添加到我的表格中

这是我的.vue文件：

<template>
....
  <b-table small :fields="fields" :items="items">
    <template #cell(name)="data">
      <b>{{ data.value.name }}</b>
    </template>
    ....    
  </b-table>
....
<template>

<script>
export default {
  data () {
    return {
      items: [
          { name: { name: '....', url: '....' }, utility: '....', icon: '../assets/.....png', _rowVariant: 'light' },
          { name: { name: '....', url: '....' }, utility: '....', icon: '../assets/.....png', _rowVariant: 'success' },
          { name: { name: '....', url: '....' }, utility: '....', icon: '../assets/.....png', _rowVariant: 'danger' },
          { name: { name: '....', url: '....' }, utility: '....', icon: '../assets/.....png', _rowVariant: 'custom-one' }
      ],
      tableVariants: ['primary', 'secondary', 'info', 'danger', 'warning', 'success', 'light', 'dark','custom-one', 'custom-two', 'custom-three' ],
..........
</script>

<style lang="scss" scoped>
@import '../scss/custom.scss';
.........
</style>

如何添加自定义颜色？ 谢谢

元素

生成一个

元素，其类为

b-table

（以及一些其他特定于引导的类）。默认情况下，此元素没有

背景色

，但

：dark=“true”

的情况除外，该情况适用

背景色：到它

也就是说

.b-table {
  background-color: red;
}

…会有用的

将
红色
更改为所需颜色。如果颜色为深色，请将
：dark=“true”
传递到
，这将相应地更改文本颜色和单元格/行边框颜色

此外，如果您只想在一个特定的表上使用该规则，请给它一个id或一个类，并使用该选择器使该规则仅应用于该元素（上面的操作将应用于所有
元素）

请注意，这不会影响您使用设置行和单元格样式的能力


如果您想继续定义额外的引导颜色变体，下面介绍如何操作：

自定义引导.scss

@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";

// removes the colors, if you don't use them
$colors: map-remove($colors,
  "blue", "indigo", "purple", "pink", "red", "orange", "yellow",
  "green", "teal", "cyan", "white", "gray", "gray-dark"
);

// adds custom colors, should you want any:
$colors: (
  "orange": #f50,
  "red": #BC2E2E,
  "green": #8CB439,
  "yellow": #DEC648
);

// removes theme-colors you don't want:
$theme-colors: map-remove($theme-colors,
  "warning", "info", "light", "dark"
);

// adds theme-colors you want. Note this this is not assigned
// it is merged with the difference between defaults and the ones removed above
// so, for example, `$secondary`, `$danger` will still be present.
$theme-colors: (
  "primary": #f50,
  "light": #DDDEE1,
  "dark": #15161a,
  "badass": #BADA55
);

// import the functionality you want (and remove the stuff you don't want).
// from `~bootstrap/scss/bootstrap`, except the first three 
// `functions`, `variables` and `mixins`, 
// which you already imported and used above

@import "~bootstrap/scss/root";
@import "~bootstrap/scss/reboot";
@import "~bootstrap/scss/type";

//... all the way down to `~bootstrap/scss/print`

显然，在
main.（js | ts）
中，您必须替换

import 'bootstrap/dist/css/bootstrap.css'

与

现在您可以在应用程序的任何元素上使用
var（--badass）
，它将导致
#BADA55


例如，如果您提供一行：
\u rowVariant:“badass”
，它将把类
表badass
应用于该行的所有单元格，并且在CSS中，您应该具有：

.table-badass {
  background-color: var(--badass);
  color: var(--light);
}

为什么要在组件中而不是全局导入
custom.scss
文件？我尝试将颜色应用于b-table类，效果良好。但我想知道是否有办法管理不同行的颜色，而不是整个表的颜色。Thanks@Pietro最后，但并非最不重要的一点是，在回答评论时提出附加问题是离题的。如果回答了，这些问题将不会从索引中受益，而具有相同问题的未来用户将无法从答案中受益。简言之，通过询问评论，你是自私的。如果以前没有人问过，慷慨一点，分开问。
import './path/to/customized-bootstrap.scss'

.table-badass {
  background-color: var(--badass);
  color: var(--light);
}