Webpack bootstrap.css npm module fails parsing with ExtractTextLoader + css_loader

Question

I am learning to use node as a front end build tool and am struggling with including bootstrap into a css bundle file to include within a web page.

I have a loader for LESS and a loader for CSS, as well as loaders for FONTS, and requiring any of those from my own sources seem to work properly translating CSS into my bundle files, but as soon as I

require('bootstrap/dist/css/bootstrap.css')

or

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

I get the following error during webpack:

ERROR in ./~/bootstrap/dist/css/bootstrap.css?root=/~/bootstrap/dist/
Module parse failed: <my project root>/node_modules/bootstrap/dist/css/bootstrap.css?root=/node_modules/bootstrap/dist/ Unexpected token (7:5)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (7:5)

I checked out bootstrap.css from the bundle, and line7, char5 seems to be the " " space between html and { first css rule in the file after a block comment which is perfectly valid CSS... ? I can even copy the entire content of that file into one of my local source files (common/style.less) and it will parse just fine and be included in the bundle. I simply can't include it from the node_modules location. Why?

My app.js entry point looks like this:

import 'babel-polyfill';

// common frameworks
require('expose?$!jquery');
require('expose?jQuery!jquery');
require('bootstrap/dist/js/bootstrap.js');

// common styles
require('bootstrap/dist/css/bootstrap.css');
require('./common/style.less');

// common images
var images = require.context('./common/images/', true, /.*\.(png|gif|bmp|jpg|jpeg|ico)$/);
images.keys().forEach(images);

// modules
require('./modules/landing');

webpack.config.js:

const webpack = require('webpack');
var path = require('path');
var minimize = process.argv.indexOf('--minimize') !== -1;
var ExtractTextPlugin = require('extract-text-webpack-plugin');

var CssBundler = new ExtractTextPlugin('[name].css', {
  allChunks: true
});

var BUILD_DIR = path.resolve(__dirname, '../webroot/assets');
var APP_DIR = path.resolve(__dirname, './src');

config = {
  entry: {
    'camo' : APP_DIR + '/Camo/index',
    'frontend': APP_DIR + '/Frontend/index'
  },
  output: {
    path: BUILD_DIR,
    publicPath: '/assets/',
    filename: '[name].bundle.js'
  },
  module: {
    loaders: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'imports?this=>window!babel-loader'
    },
    {
      test: /\.css$/,
      include: APP_DIR,
      loader: CssBundler.extract("style-loader", "css-loader")
    },
    {
      test: /\.less/,
      include: APP_DIR,
      loader: CssBundler.extract("style-loader", "css-loader!less-loader")
    },
    {
      test: /\.(png|jpg|gif|bmp|ico)$/,
      include: APP_DIR,
      loader: 'url-loader?limit=8192!file?name=/images/[name].[ext]'  // inline base64 URLs for <=8k images, direct URLs for the rest]
    },
    {
      test: /\.(eot|svg|ttf|woff|woff2)$/,
      loader: 'file?name=/fonts/[name].[ext]'
    },
    {
      test: /\.handlebars$/,
      loader: "handlebars-loader"
    }]
  },
  plugins: [
    CssBundler
  ]
};

if (minimize) {
  config.plugins.push(
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      },
      output: {
        comments: false
      }
    })
  )
}

module.exports = config;

score 0 · Accepted Answer · answered Aug 12 '16 at 02:12

I finally fixed this. Notice my INCLUDE paths. for css, it includes only my /src folder, which by nature excludes node_modules since it's sibling to it. If I change my include for css to be the app root directory, the proper loader handles the css for bootstrap.css and it properly builds! whew.

Webpack bootstrap.css npm module fails parsing with ExtractTextLoader + css_loader

1 Answers1