使用 webpack 包含引导程序答案

【问题标题】：Include bootstrap using webpack使用 webpack 包含引导程序
【发布时间】：2016-12-24 14:06:08
【问题描述】：

我正在开发一个 chrome 扩展。我将 boostrap 3 用于 UI。

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 网络服务器创建的服务器。

此时一切正常，这是一个屏幕截图：

但我不希望我的 chrome 扩展依赖于网络，所以我决定使用以下方式下载 boostrap：

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 加载程序（来自样板文件），但我添加了 web 字体和 svg 的加载程序。

最后，我在 javascript 入口点中包含了 boostrap.min.css ： import 'bootstrap/dist/css/bootstrap.min.css';

现在，这就是我的扩展程序的样子：

我认为boostrap的一部分被加载了（因为第二版中的链接看起来与第一版中的链接相同。但显然，其他组件没有加载。

我也使用 react-boostrap。

谢谢

【问题讨论】：

刚写完这个问题，我想我找到了：css?modules，因为css模块的官方网站：A CSS Module是一个CSS文件，其中所有类名和动画名都在本地范围内默认

标签： javascript css twitter-bootstrap webpack webpack-style-loader

【解决方案1】：

我在 cmets 中的想法是对的，css?module local load boostrap。我更改了导入：

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

它可以工作

【讨论】：

【解决方案2】：

对于 WEBPACK 2，（即在安装所有必要的依赖项之后）您可以包含引导程序，如下所示：-

在 webpack.config.js 中添加 css 加载器

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

然后，在入口点脚本中导入 bootstrap（即我的项目中的 index.js 或 app.js、index.js）
```
import '!style-loader!css-loader!bootstrap/dist/css/bootstrap.css';
```

需要详细信息！！！ More details here

【讨论】：

【解决方案3】：

npm install bootstrap ;

还有：

调整css加载器如下：

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

并且，导入引导程序：

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

【讨论】：