如何將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

來源

2016-08-23 dmnk_89

如果升級到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": "+" 
    } 
}

來源

2016-08-30 13:42:11

我認爲你必須添加../的node_modules的前面，因爲node_modules文件夾目錄樹一步了。像這樣：「../node_modules/bootstrap/dist/css/bootstrap.css」

來源

2016-08-23 10:23:20

我應該包括那個問題。我已經嘗試了兩個版本（有和沒有'../'）具有相同的效果（好...沒有效果）。 –

也許你可以使用[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中。如果你檢查這個文件，你可以找到所有樣式。所以它按預期工作。

來源

2016-10-27 19:39:02 binaryAdam

如何將CSS庫添加到使用angular-cli @ webpack生成的項目中

回答

相關問題