twitter-bootstrap - from - sass webpack

webpack con bootstrap.css no funciona

Question

Este es mi archivo 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'')
    ]
}

Este es mi archivo 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"
}

Este es mi archivo app.js :

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

Después de intentar iniciar el paquete web, aparece un 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

Releí un montón de material y compartí varias publicaciones en varios foros. ¿Qué estoy haciendo mal?

Answer 1

La firma de ExtractTextPlugin.extract es:

ExtractTextPlugin.extract(options: loader | object)

Como no hay un segundo argumento, su css-loader no se está utilizando. La configuración más común es usar css-loader para procesar los archivos CSS y style-loader como respaldo, que se usa cuando no se debe extraer (los cargadores configurados todavía se aplican, pero en lugar de extraerse, el cargador de respaldo es usado).

Puede usar la regla que se muestra en el archivo Léame - Uso .

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