包含使用webpack的引導

我正在開發一個Chrome擴展。我使用用於UI的boostrap 3。包含使用webpack的引導

doctype html 

html 
    head 
    meta(charset='UTF-8') 
    title (Boilerplate Popup) 
    link(rel="stylesheet", href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css") 
    style. 
     body { width: 500px; } 

    body 
    #root 
    script(src=env == 'prod' ? '/js/ext.bundle.js' : 'http://localhost:3000/js/ext.bundle.js')

這是我如何被用來包括boostrap。
localhost：3000是使用webpack web服務器創建的服務器。

此時一切正常，下面是截圖：

但我不希望我的瀏覽器擴展程序要依賴於網絡，所以我決定下載使用自舉：

npm install boostrap其中已經下載了boostrap 3. 我也決定使用webpack加載boostrap.min.css。

module: { 
    loaders: [{ 
     test: /\.js$/, 
     loader: 'babel', 
     exclude: /node_modules/, 
     query: { 
     presets: ['react-hmre'] 
     } 
    }, { 
     test: /\.css$/, 
     loaders: [ 
     'style', 
     'css?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]', 
     'postcss' 
     ] 
    }, 
    {test: /\.(woff|woff2)(\?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'}] 
    }

我沒有改變的CSS加載器（它來自一個樣板），但我增加了對網絡字體和SVG裝載機。在JavaScript切入點

最後，我已經包括boostrap.min.css： import 'bootstrap/dist/css/bootstrap.min.css';

現在，這是我的分機什麼樣子：

我想的一部分boostrap被加載（因爲第二個版本中的鏈接看起來與第一個版本中的鏈接相同，但很明顯，其他組件不加載。所以使用react-boostrap。

謝謝

來源

2016-08-17 Epitouille

剛寫完這個問題後，我想我發現：'''css？modules'''，因爲css模塊的官方網站：一個CSS模塊是一個CSS文件，其中所有的類名和動畫名都是默認情況下爲本地範圍 – Epitouille

我的意見在評論是正確的，css？模塊本地加載boostrap。我改變了進口與：

import '!style!css!bootstrap/dist/css/bootstrap.min.css';

和它的作品

來源

2016-08-17 19:42:15 Epitouille

npm install bootstrap ;

和：

調整CSS加載程序如下：

 { 
      test: /\.css$/, 
      loaders: ['style', 'css'], 
     }

而且，進口自舉：

import Bootstrap from 'bootstrap/dist/css/bootstrap.css';

來源

2016-09-10 00:17:39

對於WEBPACK 2（即，所有必要的依賴安裝後），您可以包括自舉如下： - 在webpack.config.js

新增CSS裝載機

{ 
    test: /\.css$/, 
    use: [ 
     { 
      loader: 'style-loader' 
     }, 
     { 
      loader: 'css-loader', 
      options: { 
       importLoaders: 1 
      } 
     } 
    ] 
}

然後，在入口點腳本導入引導（即index.js或app.js，索引。在我的項目的js）
```
import '!style-loader!css-loader!bootstrap/dist/css/bootstrap.css';
```

需要詳細資料！More details here

來源

2017-03-20 08:22:10

包含使用webpack的引導

回答

相關問題