比方说,我们先从以下入门包:https://github.com/angularclass/angular2-webpack-starter
npm install
后npm run start
一切工作正常。
我想添加一个外部CSS模块,例如引导4个的CSS(也是唯一的CSS)。 (我知道,引导具有引导加载程序,但我现在要求一般的解决方案,所以请你们想一想引导4在这里,因为它可能是任何其他的CSS模块通过NPM可用)。
我安装引导通过NPM:npm install [email protected] --save
首先,我认为这是足以import 'bootstrap/dist/css/bootstrap.css';
添加到vendor.browser.ts文件。
但事实并非如此。
我应该怎么做才能有一个妥善的解决办法?
解决方案我不要求为:
您将无法导入任何CSS来使用堆栈您的供应商档案,没有做一些改变。
为什么?好了,因为这条线:
import 'bootstrap/dist/css/bootstrap.css';
这只是导入你的CSS字符串,当在现实中你想要的是一个风格的标签你的供应商的CSS。如果检查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规则将在全球应用到你的应用程序中。所以,你可以导入你的应用程序组件的引导方式:
@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到您的网页。然后,你需要创建一个特定规则,你的webpack.common.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
},
杉杉规则将仅应用于当你试图导入CSS,从任何包装内node_modules
第二条规则将适用于您从node_modules
外部引进任何CSS
它通过使用@import '~bootstrap/dist/css/bootstrap.css';
上的styles.css文件是可能的。 (注意了〜)
编辑:它是如何工作 - 在“〜”是一个别名上的WebPack配置指向资产的文件夹......就这么简单设置..
编辑2:关于如何配置带有“〜”别名的WebPack实例...这应该去上的WebPack配置文件(通常webpack.config.js
)...
// look for the "resolve" property and add the following...
// you might need to require the asset like '~/bootsrap/...'
resolve: {
alias: {
'~': path.resolve('./node_modules')
}
}
因此,这里是用我觉得这是最方便的CSS
导入各种angular-cli
文件的方式。
基本上,你可以参考CSS
文件(顺序很重要,如果你将重写它们)在配置和angular-cli
将完成剩余的工作。例如,您可能要包括一对夫妇的从节点模块,它可以如下方式进行:
"styles": [
"../node_modules/font-awesome/css/font-awesome.min.css",
"../node_modules/primeng/resources/primeng.min.css",
"styles.css"
]
样本全配置可能是这样的:
.angular-cli.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
"name": "my-angular-app"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"../node_modules/font-awesome/css/font-awesome.min.css",
"../node_modules/primeng/resources/primeng.min.css",
"styles.css"
],
"scripts": [],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"project": "src/tsconfig.app.json",
"exclude": "**/node_modules/**"
},
{
"project": "src/tsconfig.spec.json",
"exclude": "**/node_modules/**"
},
{
"project": "e2e/tsconfig.e2e.json",
"exclude": "**/node_modules/**"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "scss",
"component": {}
}
}