2016-06-16 8 views
1

私は現在、このライブラリhttp://roylee0704.github.io/react-flexbox-grid/を私のreact JSアプリと一緒に使用しようとしています。FlexboxGrid用の適切なローダーが見つかりません[ReactJS]

私は現在ウェブパックの設定を受けており、フレックスボックスグリッドのGithubに関する指示に従っています。

しかし、私は自分のアプリを実行しようとするたびに、私はこのファイルタイプを扱うための適切なローダーを持っていないことがわかります。私はすでにwebpack css-loaderもインストールしているので、他に何が欠けているのか分かりません。

webpack.config.js反応に述べたように、あなたの現在のCSSルールに加えて、あなたのWebPACKの設定にこれを追加する。ここ

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 + '/App.jsx', 
    output: { 
    path: BUILD_DIR, 
    filename: 'bundle.js' 
    }, 
    module : { 
    loaders : [ 
     { 
     test : /\.jsx?/, 
     include : APP_DIR, 
     loader : 'babel' 
     }, 
     { 
     test: /\.css$/, 
     loader: 'style!css!postcss', 
     include: path.join(__dirname, 'node_modules'), // this also includes flexboxgrid 
     exclude: /flexboxgrid/, // so we are excluding it 
     } 
    ] 
    } 
}; 

module.exports = config; 

は私のpackage.jsonである

{ 
    "name": "PokerSiteMaterial", 
    "version": "1.0.0", 
    "description": "Poker Site", 
    "main": "index.js", 
    "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1", 
    "dev": "webpack -d --watch", 
    "build": "webpack -p" 
    }, 
    "author": "Kai Mou", 
    "license": "ISC", 
    "dependencies": { 
    "babel-core": "^6.9.1", 
    "babel-loader": "^6.2.4", 
    "babel-preset-es2015": "^6.9.0", 
    "babel-preset-react": "^6.5.0", 
    "react": "^15.1.0", 
    "react-dom": "^15.1.0", 
    "webpack": "^1.13.1" 
    }, 
    "devDependencies": { 
    "css-loader": "^0.23.1" 
    } 
} 

答えて

2

てみてください-flexbox-grid README ...

{ 
    test: /\.css$/, 
    loader: 'style!css?modules', 
    include: /flexboxgrid/, 
} 

プロセスのパート1のみでした。 postcssを使用していると互換性のないCSSローダーに、flexboxgridを無視しても、新しいローダーを作成していないと伝えました。

基本的にflexboxgridにはcssローダーが必要です。あなたはpostcssを使用しているので、あなたはそれを無視して上記のルールを追加してそれを処理するようにあなたのメインCSS規則を伝える必要があります

関連する問題