2016-08-07 18 views
1

Webpackを使用してbootstrap.cssをエントリjsファイルに含める際に問題が発生しました。ブートストラップ3を含むWebpackエラー

私はエントリのjsファイルを持っているので、外部CSS名app.cssとブートストラップCSSをロードするために使用される命名app.js、

require("../node_modules/bootstrap/dist/css/bootstrap.css"); 
require("../css/app.css"); 

ブートストラップlibに、私はNPMとプットからそれを得ますそれをnode_modules repoに挿入します。だからここ

が私のWebPACKの設定である

var path = require('path'); 
var webpack = require('webpack'); 

module.exports = { 
    context: path.resolve('js'), 
    entry: ["./app.js"], 
    output: { 
     path: path.resolve('build/js/'), 
     publicPath: '/assets/js/', 
     filename: "bundle.js" 
    }, 
    devtool: "source-map", 
    devServer: { 
     contentBase: 'public' 
    }, 
    watch: true, 
    module: { 
     loaders: [ 
      { 
       test: /\.es6\.js$/, 
       exclude: /node_modules/, 
       loader: 'babel-loader' 
      }, 
      { 
       test: /\.css$/, 
       loader: "style-loader!css-loader" 
      }, 
      { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" }, 
      { test: /\.(woff|woff2)$/, loader:"url?prefix=font/&limit=5000" }, 
      { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" }, 
      { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml" } 
     ] 
    }, 
    resolve: { 
     extensions: ['', '.js', '.es6.js'] 
    } 
} 

私はWebPACKのを実行すると、エラーがあったが、私はGoogleで検索ではなく、このための解決策を見つけることができない、誰でも助けることができる

ERROR in ../~/bootstrap/dist/css/bootstrap.css 
Module parse failed: /front-end/Webpack/node_modules/bootstrap/dist/css/bootstrap.css Unexpected token (7:5) 
You may need an appropriate loader to handle this file type. 
SyntaxError: Unexpected token (7:5) 
    at Parser.pp$4.raise (/front-end/Webpack/node_modules/webpack/node_modules/acorn/dist/acorn.js:2221:15) 
    at Parser.pp.unexpected (/front-end/Webpack/node_modules/webpack/node_modules/acorn/dist/acorn.js:603:10) 
    at Parser.pp.semicolon (/front-end/Webpack/node_modules/webpack/node_modules/acorn/dist/acorn.js:581:61) 
    at Parser.pp$1.parseExpressionStatement (/front-end/Webpack/node_modules/webpack/node_modules/acorn/dist/acorn.js:966:10) 
    at Parser.pp$1.parseStatement (/front-end/Webpack/node_modules/webpack/node_modules/acorn/dist/acorn.js:730:24) 
    at Parser.pp$1.parseTopLevel (/front-end/Webpack/node_modules/webpack/node_modules/acorn/dist/acorn.js:638:25) 
    at Parser.parse (/front-end/Webpack/node_modules/webpack/node_modules/acorn/dist/acorn.js:516:17) 
    at Object.parse (/front-end/Webpack/node_modules/webpack/node_modules/acorn/dist/acorn.js:3098:39) 
    at Parser.parse (/front-end/Webpack/node_modules/webpack/lib/Parser.js:902:15) 
    at DependenciesBlock.<anonymous> (/front-end/Webpack/node_modules/webpack/lib/NormalModule.js:104:16) 
    at DependenciesBlock.onModuleBuild (/front-end/Webpack/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10) 
    at nextLoader (/front-end/Webpack/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25) 
    at /front-end/Webpack/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5 
    at Storage.finished (/front-end/Webpack/node_modules/webpack/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:16) 
    at /front-end/Webpack/node_modules/webpack/node_modules/enhanced-resolve/node_modules/graceful-fs/graceful-fs.js:78:16 
    at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:380:3) 
@ ./app.js 3:0-59 

起こります?高度な

答えて

2

感謝は、私はあまりにも、ブートストラップインポートいくつかの問題があったが、この解決策は

require("!style!css!./node_modules/bootstrap/dist/css/bootstrap.min.css"); 

次に、あなたのentry.jsから直接CSS-ローダーを実行してみてください...私の作品 I webpack.config.jsからチェックを外しました。

知らん理由がありますが設定から行ったように、ローダを実行している私のために働いていないどちらもしません:

/* 
     { 
      test: /\.css$/, 
      loader: "style-loader!css-loader" 
     }, 
*/ 
関連する問題