CODEWITHSUNDEEP
reactjswebpackwebpack-dev-server
Dhaval Patel
Dhaval Patel

Reputation: 7601

CSS loading throw error using webpack

I have implemented webpack config like 

   /* 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
   }
    ]
  }
};

and I have installed the css-loader style-loader for loding the css on my page and I am using the bootstrap.min.css as below 

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

it's throw error like

enter image description here

Upvotes: 0

Views: 300

Answers (1)

martindzejky
martindzejky

Reputation: 396

Bootstrap is using the Glyphicons font. You also need to have a loader for the font:

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

Source: christianalfoni.github.io/react-webpack-cookbook/Inlining-fonts

Or:

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

Source: stackoverflow.com/a/31183889/2378031

Upvotes: 1

Related Questions