Question

我正在开发Chrome扩展程序。我使用boostrap 3作为用户界面。

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

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

但我不希望我的Chrome扩展程序依赖于网络，所以我决定使用以下命令下载boostrap：

已下载了boostrap 3的

npm install boostrap。我还决定使用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。

由于

Answer 1

我在评论中的想法是对的，css？module本地加载了boostrap。我用以下内容更改了导入：

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

并且有效

Answer 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

Answer 3

npm install bootstrap ;

并且：

按如下方式调整css loader：

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

然后，导入bootstrap：

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

使用webpack包含引导程序

3 个答案: