javascript - 碳图缺少 CSS 样式。请阅读碳图表入门指南

Question

我正在使用碳设计图表的反应库，我收到间歇性错误'缺少碳图表的 CSS 样式。请阅读碳图表入门指南。'

我在 app.scss 中导入 css，它是在 index.js 中导入的。@import '~@carbon/charts/styles.css';

当我在 localhost 上执行代码时它可以工作，但是当使用 npm build 构建代码时，有时会出现此错误并且整个页面变为空白。

还尝试在组件文件的css中导入，导入'@carbon/charts/styles.css'；

Answer 1

请验证样式是否实际被应用。

我已经多次看到这个问题，通常你必须移动导入以查看它实际生效的位置。我通常使用app.component.ts这样的或更高级别的文件

此外，我们确实有一个角度入门指南 https://charts.carbondesignsystem.com/?path=/story/docs-getting-started--angular

Answer 2

花了很多时间进行实验，看看缺少什么。终于能够通过将这些添加到我的 package.json 来使其工作（除了@carbon/charts和@carbon/charts-angular）：

"carbon-components": "^10.52.0",
"@carbon/themes": "^10.50.0",

在我的全局 styles.scss 中（虽然可能在组件的 scss 中）...

@import "https://fonts.googleapis.com/css?family=IBM+Plex+Sans+Condensed|IBM+Plex+Sans:400,600&display=swap";
@import '@carbon/themes/scss/themes';
@import 'carbon-components/scss/globals/scss/styles.scss';
@import "@carbon/charts/styles/styles.scss";

Answer 3

@import，用于导入 css 文件，所以将你的导入放在 index.css 的顶部。或者你可以尝试 import '~@carbon/charts/styles.css 没有 @ inside of index.js