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

【问题标题】：How do I import css when using @ngtools/webpack?使用@ngtools/webpack 时如何导入css？
【发布时间】：2019-01-15 05:36:35
【问题描述】：

我正在使用 @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 时，角度编译器将使用“原始加载器”并将 Component.styleUrls 内联到 Component.styles。它工作正常。

然后我想安装'ngx-toastr'，我添加了

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

到我的 index.ts。它不起作用，因为这里使用了“raw-loader”。

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

【问题讨论】：

标签： css angular webpack

【解决方案1】：

我认为如果您将该 css 添加到“.angular-cli.json”文件中的“样式”中，它将正常工作。添加到样式后应该是这样的

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

【讨论】：

谢谢，但我没有使用 angular cli

【解决方案2】：

能否创建任意component.scss文件，使用相对文件路径导入toastr.scss文件。

导入'./../node_modules/ngx-toastr/toastr.css';

【讨论】：

谢谢，但它不起作用。即使您从 scss 导入 css，仍将使用“raw-loader”。顺便说一句，我已经找到了一个解决方案：使用包含和排除规则来确保只有某些目录中的 css 使用'raw-loader'。不确定这是否是“正确”的方式，但它有效。