使用webpack加载CSS错误

Question

我已经实现了像

这样的webpack配置

   /* eslint-disable no-var */
var path = require('path');
var webpack = require('webpack');

module.exports = {
  entry: [
    'webpack-hot-middleware/client',
    './src/main'
  ],
  devtool: 'eval-source-map',
  output: {
    path: __dirname,
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ],
  module: {
    loaders: [{
      test: /\.js$/,
      loaders: ['babel'],
      include: path.join(__dirname, 'src')
    },
    {
     test: /\.css$/, // Only .css files
     loader: 'style!css' // Run both loaders
   }
    ]
  }
};

我安装了css-loader样式加载器来填充我页面上的css，我正在使用bootstrap.min.css，如下所示

require('../../node_modules/bootstrap/dist/css/bootstrap.min.css');

像

一样抛出错误

Answer 1

Bootstrap正在使用Glyphicons font。您还需要有一个字体加载器：

{
  test: /\.woff$/,
  loader: 'url?limit=100000'
}

来源：christianalfoni.github.io/react-webpack-cookbook/Inlining-fonts

或者：

{
  test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
  loader: 'file-loader'
}

来源：stackoverflow.com/a/31183889/2378031