的WebPack與bootstrap.css不行

Question

這是我webpack.config.js文件：

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') 
    ] 
} 

這是我的package.json文件：

"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" 
} 

這是我app.js file：

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

嘗試啓動webpack後，出現錯誤。

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 

我重讀了一堆材料，並在各種論壇中推出了一堆帖子。 我在做什麼錯？

Answer 1

的signature of ExtractTextPlugin.extract是：

ExtractTextPlugin.extract(options: loader | object) 

由於沒有第二個參數，不使用你的css-loader。最常見的配置是使用css-loader來處理CSS文件，使用style-loader作爲回退，當不應該提取它時使用回退（配置的裝載器仍然被應用，但不是被提取使用回退裝載器）。

您可以使用Readme - Usage中顯示的規則。

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