How do I import css when using @ngtools/webpack?

Question

I am learning angular 6 with @ngtools/webpack and I got a problem with dealing with css.

I have the following module rules in webpack.config.js

module: {
    rules: [
        { test: /\.ts$/, loader: '@ngtools/webpack' },
        { test: /\.html$/, loader: 'raw-loader' },
        { test: /\.css$/, loader: 'raw-loader' }
    ]
}

When I use Component.styleUrls, the angular compiler will use the 'raw-loader' and inline the Component.styleUrls to Component.styles. It works fine.

Then I want to install 'ngx-toastr', I added

import './../node_modules/ngx-toastr/toastr.css';

to my index.ts. It doesn't work because 'raw-loader' is used here.

How can I correctly import 'toastr.css'?

Answer 1

I think if you add that css to "style" in ".angular-cli.json" file it will work fine. after adding to style it should look like this

"styles": [
    "styles.css",
    "node_modules/bootstrap/ngx-toastr/toastr.css"
  ]

Answer 2

Can you create anycomponent.scss file, import the toastr.scss file using relative file path.

import './../node_modules/ngx-toastr/toastr.css';