使用@ 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時，角度編譯器將使用“原始加載程序”並將Component.styleUrls內聯到Component.styles。 工作正常。

然后我想安裝“ ngx-toastr”，我補充說

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

到我的index.ts。 它不起作用，因為在這里使用了'raw-loader'。

如何正確導入“ toastr.css”？

Answer 1

我認為，如果將CSS添加到“ .angular-cli.json”文件中的“樣式”中，它將可以正常工作。 添加樣式后，它應該看起來像這樣

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

Answer 2

您可以創建anycomponent.scss文件，還是使用相對文件路徑導入toastr.scss文件。

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