[英]How do I import css when using @ngtools/webpack?
I am learning angular 6 with @ngtools/webpack and I got a problem with dealing with css. 我正在使用@ ngtools / webpack学习angular 6,但在处理CSS时遇到问题。
I have the following module rules in webpack.config.js 我在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. 当我使用Component.styleUrls时,角度编译器将使用“原始加载程序”并将Component.styleUrls内联到Component.styles。 It works fine.
工作正常。
Then I want to install 'ngx-toastr', I added 然后我想安装“ ngx-toastr”,我补充说
import './../node_modules/ngx-toastr/toastr.css';
to my index.ts. 到我的index.ts。 It doesn't work because 'raw-loader' is used here.
它不起作用,因为在这里使用了'raw-loader'。
How can I correctly import 'toastr.css'? 如何正确导入“ toastr.css”?
I think if you add that css to "style" in ".angular-cli.json" file it will work fine. 我认为,如果将CSS添加到“ .angular-cli.json”文件中的“样式”中,它将可以正常工作。 after adding to style it should look like this
添加样式后,它应该看起来像这样
"styles": [
"styles.css",
"node_modules/bootstrap/ngx-toastr/toastr.css"
]
Can you create anycomponent.scss file, import the toastr.scss file using relative file path. 您可以创建anycomponent.scss文件,还是使用相对文件路径导入toastr.scss文件。
import './../node_modules/ngx-toastr/toastr.css'; 导入'./../node_modules/ngx-toastr/toastr.css';
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.