Why would a CSS file be imported into typescript?

Question

In an older, complex code base that uses Angular 4 with a custom Webpack, there were some components that imported a css file, in the same way that you would import a module for a side effect. An example (this is the complete file, with different variable names):

import { Component, OnInit } from '@angular/core';
import '../../assets/css/styles.css';

@Component({
    selector: 'sidebar-app',
    templateUrl: './sidebar.component.html',
    styleUrls: ['./sidebar.component.css']
})
export class SidebarComponent implements OnInit {

    ngOnInit() {
    }
}

styles.css

.content_body {
    padding: 0;
}

.basic_page_wrapper {
    padding: 0;
}

I have never seen css being imported in typescript, and all other examples I've found use the styles in some way, for example

import * as s from './Button.css';

Why would a css file be imported like import '../../assets/css/styles.css'; inside an angular component?

Barthy · Accepted Answer · 2019-09-26 08:38:55Z

3

When using bundlers such as webpack or browserify, one might import a CSS file in order to process it and pack it into the same bundle as the JavaScript module that imports it.

In webpack, this is done using the style-loader. Read more in this medium post!

edited Sep 26, 2019 at 8:38

answered Sep 26, 2019 at 0:18

Barthy

3,2511 gold badge27 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Why would a CSS file be imported into typescript?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related