假设我们从以下启动包开始:
npm install岁和npm run start岁之后，一切正常.
我想添加一个外部css模块，例如bootstrap 4的css(并且只添加css).(我知道bootstrap有一个bootstrap加载程序，但现在我要求提供通用的解决方案，所以请考虑一下bootstrap 4，因为它可能是通过npm提供的任何其他css模块).
我通过npm安装bootstrap:npm install bootstrap@4.0.0-alpha.4 --save
首先，我认为在供应商中增加import 'bootstrap/dist/css/bootstrap.css';就足够了.浏览器ts文件.
但事实并非如此.
我该怎么做才能找到合适的解决方案？
我没有要求的解决方案:
如果不做一些更改，您将无法使用该堆栈将任何css导入到您的vendors文件中.
为什么？因为这句话:
import 'bootstrap/dist/css/bootstrap.css';
它只是将css作为字符串导入，而实际上，您需要的是样式标记中的供应商css.如果你 Select config/webpack.commons.js，你会发现这个规则:
{
test: /\.css$/,
loaders: ['to-string-loader', 'css-loader']
},
此规则允许组件导入css文件，基本上如下所示:
@Component({
selector: 'app',
encapsulation: ViewEncapsulation.None,
styleUrls: [
'./app.component.css' // this why you import css as string
],
在AppComponent中没有封装，因为第encapsulation: ViewEncapsulation.None,行意味着任何css规则都将全局应用于你的apply.因此，您可以在应用程序组件中导入 bootstrap 样式:
@Component({
selector: 'app',
encapsulation: ViewEncapsulation.None,
styleUrls: [
'./app.component.css',
'../../node_modules/bootstrap/dist/css/bootstrap.css'
],
但如果你坚持要导入到你的vendor.ts，那么你需要安装一个新的加载程序，npm i style-loader --save-dev这将允许webpack向你的页面注入css.然后你需要在你的网页上创建一个特定的规则.常见的js并更改现有的:
{ //this rule will only be used for any vendors
test: /\.css$/,
loaders: ['style-loader', 'css-loader'],
include: [/node_modules/]
},
{
test: /\.css$/,
loaders: ['to-string-loader', 'css-loader'],
exclude: [/node_modules/] //add this line so we ignore css coming from node_modules
},
第一条规则仅在您try 从node_modules内部的任何包导入css时适用.第二条规则将应用于您从node_modules外部导入的任何css