Angular2的WebPack：如何導入引導CSS

我使用angular2-webpack-starter建立我的項目，我想用引導爲好。Angular2的WebPack：如何導入引導CSS

我安裝ng2-bootstrap爲npm install ng2-bootstrap --save。由於ng2-bootstrap只有一些指令，它需要「真正的」 .css文件引導的樣式它（但它的作者似乎假定我們有過的話），所以我安裝引導爲npm install bootstrap --save。

現在，我的問題是如何將「真實」引導程序.css文件導入到我的項目中，以便ng2-bootstrap可以使用它。

我試了幾種方法：

副本bootstrap.min.css文件從node_modules/bootstrap/dist/css文件夾到我的src/assets/css文件夾並添加<link href="assets/css/bootstrap.min.css" rel="stylesheet">我index.html。這種方式的作品，但我的關注是，bootstrap.min.css文件將不再由npm管理。我必須在將來手動更新它。
另一種嘗試從我app.component.ts像

風格需要它：[ 要求（」 ./ app.style.css '），需要（' ../../ node_modules /引導/ DIST /css/bootstrap.min.css'） ]，

，但它不能得到解決。

最後一次嘗試是增加import 'bootstrap';到vendor.browser.ts就像它import '@angular/core';。但它也失敗了。看來bootstrap不是像@angular2/core這樣的包，我可以輕鬆導入它。

所以，我的問題歸結爲如何導入/負載bootstrap中的WebPack，以便它可以通過ng2-bootstrap，在我的項目的其他部件一起使用，並且還可以通過使用NPM升級。

來源

2016-07-23 Bing Lu

關於數字2.您確定無法直接從node_modules導入css嗎？這樣做我沒有問題。 – Helzgate

@Helzgate我不能。如何導入它，是否像'require（'../../ node_modules/bootstrap/dist/css/bootstrap.min.css'）'？ –

我不知道，它只是工作，我一直在我的應用程序在很多地方以這種方式使用它一段時間（是的，我正在談論從node_modules）。你確定你有足夠的elipses？我會嘗試添加更多../並嘗試，或減去一些。也要注意錯誤，也許它正在加載CSS，但是你遇到了一些其他的錯誤。 – Helzgate

import 'bootstrap';將涉及到引導的JS切入點，而不是它的CSS。嘗試3號與

import 'bootstrap/assets/css/bootstrap.min.css';

改爲。

來源

2016-07-23 02:15:51 Harangue

它不起作用。我在./〜/ bootstrap/dist/css/bootstrap.min.css中得到'ERROR。 css文件位於'node_modules/bootstrap/dist/css/bootstrap.min.css'中，但似乎我們不能在'.ts'文件中導入'.css'文件。它無法解決。 –

但如何添加jquery？當我將文件導入到供應商時，我得到'未捕獲的錯誤：引導程序的JavaScript需要jQuery'，但Css工作正常 – kirqe

您需要使用使用CSS-裝載機 下載CSS-裝載機，我做了一些測試，我的角2和它的工作，你需要一些裝載機

npm install css-loader style-loader url-loader file-loader --save-dev

然後在您的WebPack。配置你可以用裝載機這樣

loaders: [ 
    {test: /\.css$/, loader: ['style-loader', 'css-loader']}, 
    {test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff" }, 
    {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" }, 
    {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" }, 
    {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml" }, 
    {test: /\.html$/, loader: 'raw',exclude: /node_modules/}, 
    {test : /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,loader : 'file-loader'}, 
]

可以加載你要去哪裏與使用你的啓動文件，你可以在課堂上使用的引導就像

import "bootstrap/dist/css/bootstrap.css"; 
    @Component({ 
     selector: "sg-nav", 
     template: ` 
        <div class="container"></div>`, 
    }) 
    export class NavComponent { 
     public name: string = "MR.Js"; 
    }

here you can read how it works with css loader

working example with bootstrap

來源

2016-07-23 04:01:54

你能告訴我如何使用這個css加載程序與angular-cli.ia無法引用我在node_modules中的引導 –

此解決方案與我的第一個解決方案類似。 '.css'被加載，但是它從'src'文件夾而不是'node_modules/bootstrap'加載。所以，如果我在'package.json'和'npm install'中更新版本，css文件將不會被更新。 –

我已經在我的angular2項目中實現了引導程序，並編輯了我的答案以向您展示它的工作原理。嘗試一下！ –

也許你可以這樣試試

import 'bootstrap'; 
import '!style-loader!css-loader!bootstrap/assets/css/bootstrap.min.css';

第一個'import'會導入'bootstrap'模塊（可能參考bootstrap.js）;

第二個可能會導入css。

，並在您webpack.config.js可以使用裝載機

來源

2016-11-23 08:22:20 Qing

你可以通過的WebPack設置它，但這需要安裝並添加裝載機您webpack.config.js（CSS-裝載機，風格裝載機，url加載器，文件加載器），然後導入vendor.ts中的bootstrap.min.css文件和引導文件。

我認爲這是相當詳細的。而不是上面，你可以只只需安裝（例如使用NPM）和下面的腳本一行（縮小的的WebPack js文件）添加到您的index.html

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

來源

2017-01-11 23:25:46 Belfield

有可能是一個更好的辦法，但我使用bower在我的ng2項目中處理css相關的庫（例如bootstrap，font-awesome）。

設置你的.bowerrc將文件保存到：src/assets/lib（例如）是這樣的：

{ 
    "directory": "src/assets/lib", 
}

然後用NPM安裝亭子。

npm install bower --save-dev

然後你就可以安裝引導用：

bower install bootstrap --save添加（如果要固定版本號）到您的bower.json文件。

關於這個解決方案的好處是，亭子爲你處理所有的依賴關係（例如，它會自動添加了jQuery的lib目錄）

然後，您可以手動添加你的鏈接在你index.html，因爲你已經做： <link rel="stylesheet" href="./assets/lib/bootstrap/dist/css/bootstrap.min.css"/>

我加入了src/assets/lib文件夾到我的.gitignore ......以及安裝/部署，我跑bower install。

來源

2017-03-07 21:44:39 andzep

Angular2的WebPack：如何導入引導CSS

回答

相關問題