Angular2: How to import a stylesheet from node_modules?

Question

Question: In my Angular2 (4.0) app, how can I import stylesheets (css) from a module in node_modules?

I have a module located here:

node_modules/@swimlane/ngx-datatable

I want to import this stylesheet:

node_modules/@swimlane/ngx-datatable/release/index.css

I've tried the following approaches, with no luck:

In my components own scss file:

@import '~@swimlane/ngx-datatable/release/index.css';

In my component:

@Component({
  encapsulation: ViewEncapsulation.None,
  selector: 'site_table',
  template: require('./site_table.html'),
  styleUrls: ['./site_table.scss', '@swimlane/ngx-datatable/release/index.css']
})

Have you tried this @import 'node_modules/@swimlane/ngx-datatable/release/index.css' — Murali Krishna
– Murali Krishna, Commented May 2, 2017 at 12:42

sickelap · Accepted Answer · 2017-05-02 12:56:36Z

17

Because you're already using SCSS, in your ./site_table.scss import it like so

@import "~swimlane/ngx-datatable/release/index";

Note: do not add the extension.

It will import stylesheet from node package. That served my well, hope it will do for you too. That way you just have to use single stylesheet in your component and it will look cleaner.

answered May 2, 2017 at 12:56

sickelap

89711 silver badges21 bronze badges

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

Comments

daisura99 · Accepted Answer · 2019-02-10 05:56:09Z

3

If you are using new the angular-cli with the angular.json file and not webpack, the tilde (~) in @sickelap's answer probably doesn't work for you.

Instead what you can do is add this in your angular.json file:-

        ...
        "styles": [
          ...
        ],
        "stylePreprocessorOptions": {
          "includePaths": [
            "node_modules/@swimlane"
          ]
        },
        ...

Then, in your component's .scss file, insert this:

@import "ngx-datatable/release/index";

Note that the .css extension is not required.

answered Feb 10, 2019 at 5:56

daisura99

1,1201 gold badge13 silver badges24 bronze badges

Comments

jackstrapp · Accepted Answer · 2017-05-02 12:47:19Z

1

Try it with a complete relative url:

@Component({
  encapsulation: ViewEncapsulation.None,
  selector: 'site_table',
  template: require('./site_table.html'),
  styleUrls: [
          './site_table.scss', 
          '../../node_modules/@swimlane/ngx-datatable/release/index.css' 
  ]
})

Didn't tried your notation but node package resolution might not work without webpack. I may be wrong though.

answered May 2, 2017 at 12:47

jackstrapp

3131 silver badge10 bronze badges

Collectives™ on Stack Overflow

Angular2: How to import a stylesheet from node_modules?

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related