webpack with bootstrap.css not work

问题

This is my webpack.config.js file:

var ExtractTextPlugin = require('extract-text-webpack-plugin'),
    webpack = require('webpack');

module.exports = {
    entry: [
        './src/app.js',
    ],
    output: {
        path: __dirname + '/../web/js',
        filename: 'build.js',
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            },
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
            },
            {
                test: /\.(png|woff|woff2|eot|ttf|svg)$/,
                loader: "url?limit=5000"
            }
        ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        }),
        new ExtractTextPlugin('build.css')
    ]
}

This is my package.json file:

"dependencies": {
    "angular": "^1.6.4",
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-polyfill": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "bootstrap": "^3.3.7",
    "css-loader": "^0.28.4",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^0.11.2",
    "jquery": "^3.2.1",
    "style-loader": "^0.18.2",
    "url-loader": "^0.5.9",
    "webpack": "^3.4.1"
}

This is my app.js file:

import 'babel-polyfill';
import $ from 'jquery';
import 'bootstrap/dist/js/bootstrap.js';
import 'bootstrap/dist/css/bootstrap.css';

After trying to start the webpack I get an error.

ERROR in ./node_modules/bootstrap/dist/css/bootstrap.css Module parse failed:
/var/www/dcracks/app/webpack/node_modules/bootstrap/dist/css/bootstrap.css
Unexpected token (7:5) You may need an appropriate loader to handle this file type.
  |  */
  | /*! normalize.css v3.0.3
  | MIT License
  | github.com/necolas/normalize.css */
  | html {
  |   font-family: sans-serif;
  |   -webkit-text-size-adjust: 100%;
  @ ./node_modules/bootstrap/dist/css/bootstrap.css 4:14-42
  @ ./src/app.js  @ multi ./src/app.js

I reread already a bunch of material and shoveled a bunch of posts in various forums. What am I doing wrong?

回答1:

The signature of ExtractTextPlugin.extract is:

ExtractTextPlugin.extract(options: loader | object)

As there is no second argument, your css-loader is not being used. The most common configuration is to use css-loader to process the CSS files and style-loader as a fallback, which is used when it shouldn't be extracted (the configured loaders are still applied, but instead of being extracted the fallback loader is used).

You can use the rule that is shown in the Readme - Usage.

{
  test: /\.css$/,
  use: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: 'css-loader'
  })
}

来源：https://stackoverflow.com/questions/45462672/webpack-with-bootstrap-css-not-work