[英]How to add css library to project generated with angular-cli@webpack
After creating new project and upgrading it to webpack version I wanted to add bootstrap's CSS. 创建新项目并将其升级到webpack版本后,我想添加bootstrap的CSS。
I tried method descibed in docs [1] but it doesn't seem to work. 我尝试了在文档[1]中描述过的方法,但似乎不起作用。
I cannot use the cdn version because my users may have to work without acces to external networks. 我无法使用CDN版本,因为我的用户可能必须工作才能访问外部网络。
[1] https://github.com/angular/angular-cli#global-library-installation [1] https://github.com/angular/angular-cli#global-library-installation
"apps": [
{
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.css"
],
...
. 。
$ ng --version
angular-cli: 1.0.0-beta.11-webpack.2
node: 5.4.1
os: linux x64
or maybe I just don't understand what should happen? 还是我只是不知道该怎么办? after ng build
in dist
dir there is no CSS file and there is nothing added to index.html
ng build
在dist
dir中ng build
,没有CSS文件,并且没有添加任何内容到index.html
I think that you have to add ../ front of the node_modules, because node_modules folder is one step up in the directory tree. 我认为您必须在node_modules的前面添加../,因为node_modules文件夹在目录树中向上移动了一步。 Like this: "../node_modules/bootstrap/dist/css/bootstrap.css" 像这样:“ ../node_modules/bootstrap/dist/css/bootstrap.css”
If you upgrade to 1.0.0-beta.11-webpack.3
or higher, you can use the apps[0].styles
property of angular-cli.json
to list external stylesheets for import. 如果升级到1.0.0-beta.11-webpack.3
或更高版本,则可以使用angular-cli.json
的apps[0].styles
属性列出要导入的外部样式表。 With this you don't have to add anything to index.html
. 这样,您无需向index.html
添加任何内容。
To upgrade from 1.0.0-beta.11-webpack.2
to 1.0.0-beta.11-webpack.3
, run: 要从1.0.0-beta.11-webpack.2
升级到1.0.0-beta.11-webpack.3
,请运行:
npm uninstall -g angular-cli
npm cache clean
npm install -g angular-cli@1.0.0-beta.11-webpack.3
Note: you may need to upgrade to Node.js 6 if you get SyntaxError: Unexpected token ...
errors on running ng version
. 注意:如果在运行ng version
遇到SyntaxError: Unexpected token ...
错误,则可能需要升级到Node.js 6。 See https://github.com/angular/angular-cli/issues/1883 for details. 有关详细信息,请参见https://github.com/angular/angular-cli/issues/1883 。
If you generate a new project and install Bootstrap, your angular-cli.json
should look something like this: 如果生成新项目并安装Bootstrap,则angular-cli.json
应该如下所示:
{
"project": {
"version": "1.0.0-beta.11-webpack.3",
"name": "demo"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": "assets",
"index": "index.html",
"main": "main.ts",
"test": "test.ts",
"tsconfig": "tsconfig.json",
"prefix": "app",
"mobile": false,
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [],
"environments": {
"source": "environments/environment.ts",
"prod": "environments/environment.prod.ts",
"dev": "environments/environment.dev.ts"
}
}
],
"addons": [],
"packages": [],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"prefixInterfaces": false,
"lazyRoutePrefix": "+"
}
}
All your css files from apps[0].styles
property of angular-cli.json
during ng build
are compiled into styles.bundle.js and this file is included in index.html
. 在ng build
期间,您来自angular-cli.json
apps[0].styles
属性的所有css文件都将编译为styles.bundle.js,并且此文件包含在index.html
。 If you check this file you can found there all styles. 如果您检查此文件,则可以找到所有样式。 So it works as intended. 因此它按预期工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.