Styles in component not working, but works in index.html

Question

I am working with an Angular 2+ project, and I am adding a third party library called DHTMLX Gantt Chart. I have everything set up and working, but I have an odd problem with the styles.

I have a component folder with the three main files:

mycomponent.component.html

mycomponent.component.css

mycomponent.component.ts.

In mycomponent.component.css I imported in the library styles like so:

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

And for some reason when I compile and load the chart, these styles aren't catching and fail to attach themselves to the html.

But when I import the styles in the index.html like this:

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

And compile, it seems to work just fine.

I've triple checked the paths, and know for sure that they are correct for both instances.

I'm wondering if its failing because of the order in which the styles/components/chart are loading?

Is there a solution where I can keep the style import in my component CSS?

Answer 1

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

It's only importing your css as string, when in reality what you want is your vendor css in a style tag.

In the MyComponent.component.ts there's no encapsulation, because of this line encapsulation: ViewEncapsulation.None, which means any css rules will be applied globally to your app. So you can import the bootstrap styles in your app component:

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

Edit

If you check config/webpack.commons.js you will find this rule:

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

This rule allows your components to import the css files, basically this:

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