Angular 2 Component Styles not resolving css imports from node_modules

Question

Based on the documentation found under Angular Component Styles, I was trying to import the style sheets found under the node_modules; ie:

test.component.css:

@import '~@angular/material/core/theming/all-theme.css';

Whereby the component is defined:

@Component({
    moduleId: module.id,
    selector: 'app-test',
    templateUrl: 'test.component.html',
    styleUrls: ['test.component.css'],
    encapsulation: ViewEncapsulation.None
})
export class TestComponent {
}

Unfortunately when browsed to the page, it comes up that the ~@angular/material/core/theming/all-theme.css cannot be found.

This project was set up using the Angular-Cli.

I suppose I could copy in the styles, and reference them that way, but I'd rather keep the library dependencies separate.

Just to make sure , did you install @angular/material . Is the folder structure correct and file exists in node_modules — Vamshi
– Vamshi, Commented Jun 10, 2017 at 18:13
This looks resolved once I upgraded from angular-cli v1.0.0-beta.28.3 to angular/cli v1.1.2. — Robert Colfin
– Robert Colfin, Commented Jun 17, 2017 at 16:26

Ashwani Kumar · Accepted Answer · 2017-06-10 18:43:41Z

3

If you want to include any style sheet from node module folder.. you just need to add it in .angular-cli.json

 "styles": [
    "../node_modules/bootstrap/scss/bootstrap.scss"
]

Also you don't need to add encapsulation:ViewEncapsulation.None until you are creating your html dynamically with some third party plugin or adding some random css.

you can always use global css which are included in your .angular-cli.json

answered Jun 10, 2017 at 18:43

Ashwani Kumar

2162 silver badges14 bronze badges

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

2 Comments

Andres M Over a year ago

That's correct. You can also import the style in styles.css

Robert Colfin Over a year ago

It looks like upgrading to a angular-cli v1.1.2 fixed it without needing to modify the .angular-cli.json though I did try that too. I still find that I need to use ViewEncapsulation.None otherwise the classes that are imported are not being resolved when I add them to the element's classList.

Omkar Yadav · Accepted Answer · 2017-06-11 04:03:29Z

-1

The problem is with the file extension. You are using the extension css which doesn't support to import file from the other location better way you can change the extension to the scss. In this you can import the files from the node_modules.

answered Jun 11, 2017 at 4:03

Omkar Yadav

5431 gold badge6 silver badges14 bronze badges

2 Comments

Vamshi Over a year ago

CSS import not supported ?

Omkar Yadav Over a year ago

In webpack when css import any file it is interpreted as the URL and if you use the scss then the file is imported as style-loader. Means it actually load the file not just URL.

Collectives™ on Stack Overflow

Angular 2 Component Styles not resolving css imports from node_modules

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related