Стили в компоненте не работают, но работают в 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
  ],