组件中的样式无效，但可在index.html中使用。 （角度2+）

Question

您好，我正在处理Angular 2+项目，并添加了一个名为DHTMLX Gantt Chart.的第三方库，我已完成所有工作并可以使用，但是样式却有一个奇怪的问题。

我有一个包含三个主要文件的组件文件夹：

mycomponent.component.html

mycomponent.component.css

mycomponent.component.ts。

在mycomponent.component.css中，我导入的库样式如下：

@import "../../../../node_modules/dhtmlx-gantt/codebase/dhtmlxgantt.css";

由于某种原因，当我编译并加载图表时，这些样式无法捕捉，并且无法将自身附加到html。

但是当我像这样导入index.html中的样式时：

<style>
  @import "../node_modules/dhtmlx-gantt/codebase/dhtmlxgantt.css";
</style>

然后编译，似乎工作正常。

我已经对路径进行了三重检查，并确定它们对于两个实例都是正确的。

我想知道它是否由于样式/组件/图表的加载顺序而失败？

有没有可以将样式导入保留在组件CSS中的解决方案？

谢谢！

Answer 1

@import "../../../../node_modules/dhtmlx-gantt/codebase/dhtmlxgantt.css";

这只是将CSS作为字符串导入，而实际上您想要的是样式标记中的供应商CSS。

在 MyComponent.component.ts 中没有任何封装，因为存在以下封装：ViewEncapsulation.None，这意味着所有css规则都将全局应用于您的应用。因此，您可以在应用程序组件中导入引导样式：

@Component({
  selector: 'app',
  encapsulation: ViewEncapsulation.None,
  styleUrls: [
    './mycomponent.component.css',
    '../../../../node_modules/dhtmlx-gantt/codebase/dhtmlxgantt.css'
  ],

修改

如果您选中 config / webpack.commons.js ，则会发现以下规则：

{
    test: /\.css$/,
    loaders: ['to-string-loader', 'css-loader']
},

此规则允许您的组件导入css文件，基本上是这样的：

@Component({
  selector: 'app',
  encapsulation: ViewEncapsulation.None,
  styleUrls: [
    './app.component.css' // this why you import css as string
  ],