组件中的样式不起作用，但在index.html中有效。 （Angular 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
  ],