ReactJSの純粋なCSSをwebpackでコンパイルして読み込むにはどうしたらいいですか？

Question

webpackモジュールを使用してReactJSアプリケーション用のシンプルなCSSベースのテンプレートを使用しており、コンパイル後にCSSに接続できません。私のcssファイルのための

マイWebPACKの構成は次のようになります...

var rucksack = require('rucksack-css') 
 
var webpack = require('webpack') 
 
var path = require('path') 
 

 
module.exports = { 
 
    context: path.join(__dirname, './src'), 
 
    entry: { 
 
    css : './public/assets/css/main.css', 
 
    jsx: './index.js', 
 
    html: './public/index.html', 
 
    vendor: [ 
 
     'react', 
 
     'react-dom', 
 
     'react-redux', 
 
     'react-router', 
 
     'react-router-redux', 
 
     'redux' 
 
    ] 
 
    }, 
 
    output: { 
 
    path: path.join(__dirname, './static'), 
 
    filename: 'bundle.js', 
 
    }, 
 
    module: { 
 
    loaders: [ 
 
     { 
 
     test: /\.html$/, 
 
     loader: 'file?name=[name].[ext]' 
 
     }, 
 
     { 
 
     test: /\.css$/, 
 
     include: /src/, 
 
     loaders: [ 
 
      'style-loader', 
 
      'css-loader?modules&sourceMap&importLoaders=1&localIdentName=[local]___[hash:base64:5]', 
 
      'postcss-loader' 
 
     ] 
 
     }, 
 
     { 
 
     test: /\.css$/, 
 
     exclude: /src/, 
 
     loader: 'style!css' 
 
     }, 
 
     { 
 
     test: /\.(js|jsx)$/, 
 
     exclude: /node_modules/, 
 
     loaders: [ 
 
      'react-hot', 
 
      'babel-loader' 
 
     ] 
 
     }, 
 
    ], 
 
    }, 
 
    resolve: { 
 
    extensions: ['', '.js', '.jsx'] 
 
    }, 
 
    postcss: [ 
 
    rucksack({ 
 
     autoprefixer: true 
 
    }) 
 
    ], 
 
    plugins: [ 
 

 
    new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js'), 
 
    new webpack.DefinePlugin({ 
 
     'process.env': { NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development') } 
 
    }) 
 
    ], 
 
    devServer: { 
 
    contentBase: './src', 
 
    hot: true 
 
    } 
 
}

と相対パス 'SRC /公共/資産/ CSS /のmain.css' です。 純粋な伝統的なCSSを反応ベースのCSS-in-JSに変更せずに使用する方法はありますか？

Answer 1

私は私がものを作るためにゴクゴクやイサキを使用easyerその後、あなたはあなたのJSファイルのうち、あなたのCSSを引っ張ってextract-text-webpack-pluginを使用することができ

Answer 2

ベースHTMLとしてファイルを含め、seprateものとしてCSSを保ちます。一般的なベストプラクティスは、ホットリロードの恩恵を受けるために開発中に働いている間に、「CSS-in-JS」を使用することだと思います。そして、上記のプラグインを使ってプロダクション用にビルドします。

また、設定ファイルに冗長性があるようです。

{ 
    test: /\.css$/, 
    include: /src/, 
    loaders: [ 
     'style-loader', 
     'css-loader?modules&sourceMap&importLoaders=1&localIdentName=[local]___[hash:base64:5]', 
     'postcss-loader' 
    ] 
    }, 
    { 
    test: /\.css$/, // <--- this test seems redunant. Perhaps remove it. 
    exclude: /src/, 
    loader: 'style!css' 
    },