如何在Angular Bootstrap Charts中使用SCSS变量？变量无法生效问题求助

Got it, let's fix this issue for you! The problem here is that Chart.js (which Angular Bootstrap Charts is built on top of) doesn't automatically resolve CSS custom properties (the var(--xxx) syntax you're using) when initializing the chart. So directly putting those variables in your backgroundColor and borderColor won't work out of the box. Here are a few solid solutions:

Solution 1: Read CSS Variable Values in Component Code First #

This is the most straightforward approach for static color values. First, make sure your CSS variables are properly defined (either globally or scoped to your component):

Step 1: Define your CSS variables #

If you want global variables, add this to your root styles.scss:

:root {
  --barchartClr: rgba(255, 99, 132, 0.5);
  --barchartborderClr: rgba(255, 99, 132, 1);
}

Or for component-scoped variables, add this to your component's .scss file:

:host {
  --barchartClr: rgba(255, 99, 132, 0.5);
  --barchartborderClr: rgba(255, 99, 132, 1);
}

Step 2: Fetch the variable values in your component #

Update your TypeScript code to get the actual color values using getComputedStyle before assigning them to your chart config:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-your-chart-component',
  templateUrl: './your-chart-component.component.html',
  styleUrls: ['./your-chart-component.component.scss']
})
export class YourChartComponent implements OnInit {
  chartvpColors: any[] = [];
  // Your other chart properties (chartvpType, chartvpDatasets, etc.)

  ngOnInit(): void {
    // Get the computed styles to access the CSS variables
    const rootStyles = getComputedStyle(document.documentElement);
    // Trim to remove any extra whitespace from the variable value
    const barChartBg = rootStyles.getPropertyValue('--barchartClr').trim();
    const barChartBorder = rootStyles.getPropertyValue('--barchartborderClr').trim();

    this.chartvpColors = [ 
      { 
        backgroundColor: barChartBg, 
        borderColor: barChartBorder, 
        borderWidth: 2, 
      }, 
      { 
        backgroundColor: 'rgba(0, 137, 132, .2)', 
        borderColor: 'rgba(0, 10, 130, .7)', 
        borderWidth: 2, 
      } 
    ];
  }
}

Now when the chart initializes, it'll use the actual color values instead of the variable references.

Solution 2: Use a Chart.js Plugin for Dynamic Updates #

If your CSS variables might change dynamically (e.g., on user interaction), you can use a Chart.js plugin to resolve the variables every time the chart draws:

import { Component, OnInit } from '@angular/core';
import { Chart } from 'chart.js';

// Register a custom plugin to resolve CSS variables
Chart.register({
  id: 'cssVariableResolver',
  beforeDraw: (chart) => {
    const rootStyles = getComputedStyle(document.documentElement);
    // Loop through all datasets to check for CSS variables
    chart.data.datasets.forEach(dataset => {
      // Resolve backgroundColor if it uses a CSS variable
      if (dataset.backgroundColor?.toString().includes('var(')) {
        const varName = dataset.backgroundColor.match(/var\((.*?)\)/)[1].trim();
        dataset.backgroundColor = rootStyles.getPropertyValue(varName).trim();
      }
      // Resolve borderColor if it uses a CSS variable
      if (dataset.borderColor?.toString().includes('var(')) {
        const varName = dataset.borderColor.match(/var\((.*?)\)/)[1].trim();
        dataset.borderColor = rootStyles.getPropertyValue(varName).trim();
      }
    });
  }
});

@Component({
  selector: 'app-your-chart-component',
  templateUrl: './your-chart-component.component.html',
  styleUrls: ['./your-chart-component.component.scss']
})
export class YourChartComponent implements OnInit {
  chartvpColors = [ 
    { 
      backgroundColor: "var(--barchartClr)", 
      borderColor: "var(--barchartborderClr)", 
      borderWidth: 2, 
    }, 
    { 
      backgroundColor: 'rgba(0, 137, 132, .2)', 
      borderColor: 'rgba(0, 10, 130, .7)', 
      borderWidth: 2, 
    } 
  ];
  // Your other chart properties...

  ngOnInit(): void {
    // Your chart initialization logic
  }
}

This plugin will run right before the chart draws, updating the color values to match the current state of your CSS variables.

Solution 3: Use SCSS Variables Directly (No CSS Custom Properties) #

If you originally wanted to use SCSS variables instead of CSS custom properties, you can export your SCSS variables to be accessible in TypeScript:

Step 1: Export SCSS variables #

Create a _variables.scss file (or use your existing one) and add:

$barchartClr: rgba(255, 99, 132, 0.5);
$barchartborderClr: rgba(255, 99, 132, 1);

// Export variables for TypeScript access
:export {
  barchartClr: $barchartClr;
  barchartborderClr: $barchartborderClr;
}

Step 2: Import and use in your component #

import { Component, OnInit } from '@angular/core';
// Import the exported SCSS variables
import * as styles from './_variables.scss';

@Component({
  selector: 'app-your-chart-component',
  templateUrl: './your-chart-component.component.html',
  styleUrls: ['./your-chart-component.component.scss']
})
export class YourChartComponent implements OnInit {
  chartvpColors: any[] = [];

  ngOnInit(): void {
    this.chartvpColors = [ 
      { 
        backgroundColor: styles.barchartClr, 
        borderColor: styles.barchartborderClr, 
        borderWidth: 2, 
      }, 
      { 
        backgroundColor: 'rgba(0, 137, 132, .2)', 
        borderColor: 'rgba(0, 10, 130, .7)', 
        borderWidth: 2, 
      } 
    ];
  }
}

This way, you're directly using the compiled SCSS variable values in your chart config.

Quick Check #

Before testing, make sure your CSS/SCSS variables are actually active: right-click your component in the browser dev tools, go to the "Styles" tab, and verify the variables are present and have valid values.

内容的提问来源于stack exchange，提问作者Ann