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

【问题标题】：Missing CSS styles for Carbon Charts. Please read the Carbon Charts getting started guide碳图缺少 CSS 样式。请阅读碳图表入门指南
【发布时间】：2021-06-13 09:45:16
【问题描述】：

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

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

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

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

【问题讨论】：

标签： javascript css reactjs carbon-design-system

【解决方案1】：

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

【讨论】：

抱歉描述不正确。我在 app.scss 中导入 css，它是在 index.js 中导入的。 @import '~@carbon/charts/styles.css';

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

花费大量时间进行实验，看看缺少什么。终于能够通过将这些添加到我的 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";

【讨论】：