使用@ ngtools / webpack时如何导入CSS？

Question

我正在使用@ ngtools / webpack学习角度6，但是在处理CSS时遇到了问题。

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

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

当我使用Component.styleUrls时，角度编译器将使用'raw-loader'并将Component.styleUrls内联到Component.styles。很好。

然后我要安装'ngx-toastr'，

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

到我的index.ts。它不起作用，因为此处使用了“原始加载程序”。

如何正确导入“ toastr.css”？

Answer 1

我认为，如果将CSS添加到“ .angular-cli.json”文件中的“样式”中，它将可以正常工作。 添加样式后，它应该看起来像这样

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

Answer 2

您可以创建任何component.scss文件，还是使用相对文件路径导入toastr.scss文件。

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