如何将CSS库添加到使用angular-cli @ webpack生成的项目中

问题描述：

创建新项目并将其升级到webpack版本后，我想添加bootstrap的CSS。如何将CSS库添加到使用angular-cli @ webpack生成的项目中

我试过在文档[1]中描述的方法，但它似乎不工作。

我无法使用cdn版本，因为我的用户可能必须在没有访问外部网络的情况下工作。

[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

或者我只是不明白应该发生什么？在dist目录ng build后没有CSS文件，并没有什么增加index.html

答

如果升级到1.0.0-beta.11-webpack.3或更高版本，可以使用的angular-cli.json的apps[0].styles属性列出外部样式表进口。有了这个，你不必添加任何东西到index.html。

要升级从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 [email protected]

注意：您可能需要升级到Node.js的6，如果你运行ng version得到SyntaxError: Unexpected token ...错误。详情请参阅https://github.com/angular/angular-cli/issues/1883。

如果您生成一个新的项目，并安装引导，你angular-cli.json看起来应该是这样的：在ng build

{ 
    "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": "+" 
    } 
}

答

我认为你必须添加../的node_modules的前面，因为node_modules文件夹目录树一步了。像这样： “../node_modules/bootstrap/dist/css/bootstrap.css”

我应该包括那个问题。我已经尝试了两个版本（有和没有'../'）具有相同的效果（好...没有效果）。 –

也许你可以使用[ng2-bootsrap]（https://github.com/valor-software/ng2-bootstrap）像[这里]（http://stackoverflow.com/questions/37649164/how-to-add- bootstrap-to-an-angular-cli-project） –

ng2-bootstrap只添加js，没有CSS，所以安装它并没有帮助。提供quistion所提供的CSS的方法不适用于webpack –

答

所有

你的CSS文件从angular-cli.jsonapps[0].styles财产被编译成styles.bundle.js这文件包含在index.html中。如果你检查这个文件，你可以找到所有样式。所以它按预期工作。

如何将CSS库添加到使用angular-cli @ webpack生成的项目中

相关推荐