使用@ngtools/webpack如何导入css？

Question

我正在通过@ngtools/webpack学习angular 6，我在处理css时遇到了一个问题。

我在webpack.config.js中有以下模块规则

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

当我使用Component.styleUrls时，angular编译器将使用'raw-loader‘并将Component.styleUrls内联到Component.styles。它工作得很好。

然后我想安装'ngx-toastr'，我补充道

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

到我的index.ts。它不能工作，因为这里使用了'raw-loader‘。

我怎样才能正确地导入‘toast.css’？

Answer 1

我认为如果你将css添加到".angular-cli.json“文件中的"style”中，它会工作得很好。添加到样式后，它应该如下所示

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

Answer 2

是否可以创建anycomponent.scss文件，使用相对文件路径导入toastr.scss文件。

import‘./../node_modules/ngx-toastr/toast.css’；