2

反応プロジェクトにブートストラップをインポートしようとしましたが、機能しません。まず、このエラーが発生しました

ERROR in ./~/bootstrap/dist/css/bootstrap.css
Module parse failed: C:\wamp\www\project\node_modules\bootstrap\dist\css\bootstrap.css Line 9: Unexpected token :
You may need an appropriate loader to handle this file type.
| html
| {
|     font-family: sans-serif;
|
|         -ms-text-size-adjust: 100%;
 @ ./src/client/app/index.jsx 11:0-43

そこで、npm で css-loader をインストールし、webpack.config.js を次のように更新しました。

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

var BUILD_DIR = path.resolve(__dirname, 'src/client/public');
var APP_DIR = path.resolve(__dirname, 'src/client/app');

var config = {
  entry: APP_DIR + '/index.jsx',
  output: {
    path: BUILD_DIR,
    filename: 'bundle.js'
  },
  module : {
    loaders : [
      {
        test : /\.jsx?/,
        include : APP_DIR,
        loader : 'babel'
      },
      { test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'file' },
      { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'file' },
      { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'},
      { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'file' },
      {
        test: /\.less$/,
        loader: 'style!css!less'
      },
      {
        test: /\.css$/, // Only .css files
        loader: 'css-loader'
      }
    ]
  }
};

module.exports = config;

今、私はこのエラーメッセージを受け取りました:

ERROR in ./~/bootstrap/dist/css/bootstrap.css
Module not found: Error: Cannot resolve module 'file' in C:\wamp\www\project\node_modules\bootstrap\dist\css
 @ ./~/bootstrap/dist/css/bootstrap.css 6:4886-4938 6:4963-5015

ERROR in ./~/bootstrap/dist/css/bootstrap.css
Module not found: Error: Cannot resolve module 'file' in C:\wamp\www\project\node_modules\bootstrap\dist\css
 @ ./~/bootstrap/dist/css/bootstrap.css 6:5065-5119

ERROR in ./~/bootstrap/dist/css/bootstrap.css
Module not found: Error: Cannot resolve module 'file' in C:\wamp\www\project\node_modules\bootstrap\dist\css
 @ ./~/bootstrap/dist/css/bootstrap.css 6:5150-5203

ERROR in ./~/bootstrap/dist/css/bootstrap.css
Module not found: Error: Cannot resolve module 'file' in C:\wamp\www\project\node_modules\bootstrap\dist\css
 @ ./~/bootstrap/dist/css/bootstrap.css 6:5233-5285

ERROR in ./~/bootstrap/dist/css/bootstrap.css
Module not found: Error: Cannot resolve module 'file' in C:\wamp\www\project\node_modules\bootstrap\dist\css
 @ ./~/bootstrap/dist/css/bootstrap.css 6:5319-5371

webpack.config.js を正しく構成する方法がわかりません。

誰でも私の問題に答えがありますか?

4

1 に答える 1