CSSモジュールは、インポートリターンは私が内部の反応CSSモジュールを使用しようとしていますが、それが動作していない

Question

を空のオブジェクト。

このコードのログ：

import React from 'react' 
import styles from '../../css/test.css' 

class Test extends React.Component { 
    render() { 
     console.log(styles) 
     return (
      <div className={styles.app}> 
       <p>This text will be blue</p> 
      </div> 
     ); 
    } 
} 

export default Test 

戻り、{オブジェクト}

及びレンダリングコードがないクラスとタグである：

<div><p>This text will be blue</p></div> 

CSSコードがサイトで利用可能であり、

.test p { 
    color: blue; 
} 

：ここで私のtest.cssです10

私はクラス=「テスト」、青

ここ

へのpの変更の色を持っているのdivを変更した場合である私のwebpack.config.js

var path = require('path') 
var webpack = require('webpack') 
var HappyPack = require('happypack') 
var BundleTracker = require('webpack-bundle-tracker') 
var path = require('path') 
var ExtractTextPlugin = require("extract-text-webpack-plugin") 

function _path(p) { 
    return path.join(__dirname, p); 
} 

module.exports = { 

    context: __dirname, 
    entry: [ 
     './assets/js/index' 
    ], 

    output: { 
     path: path.resolve('./assets/bundles/'), 
     filename: '[name].js' 
    }, 

    devtool: 'inline-eval-cheap-source-map', 

    plugins: [ 
     new BundleTracker({filename: './webpack-stats.json'}), 
     new webpack.ProvidePlugin({ 
      $: 'jquery', 
      jQuery: 'jquery', 
      'window.jQuery': 'jquery' 
     }), 
     new HappyPack({ 
      id: 'jsx', 
      threads: 4, 
      loaders: ["babel-loader"] 
     }), 
     new ExtractTextPlugin("[name].css", { allChunks: true }) 

    ], 

    module: { 
     loaders: [ 

      { 
       test: /\.css$/, 
       include: path.resolve(__dirname, './assets/css/'), 
       loader: ExtractTextPlugin.extract("style-loader", "css-loader!resolve-url-loader?modules=true&localIdentName=[name]__[local]___[hash:base64:5]") 
      }, 

      { 
       test: /\.scss$/, 
       include: path.resolve(__dirname, './assets/css/'), 
       loader: ExtractTextPlugin.extract("style-loader", "css-loader!resolve-url-loader!sass-loader?modules=true&localIdentName=[name]__[local]___[hash:base64:5]") 
      }, 

      { 
       test: /\.jsx?$/, 
       include: path.resolve(__dirname, './assets/js/'), 
       exclude: /node_modules/, 
       loaders: ["happypack/loader?id=jsx"] 
      }, 
      { 
       test: /\.png$/, 
       loader: 'file-loader', 
       query: { 
        name: '/static/img/[name].[ext]' 
       } 
      } 
     ] 
    }, 

    resolve: { 
     modulesDirectories: ['node_modules'], 
     extensions: ['', '.js', '.jsx'], 
     alias: { 
      'inputmask' : _path('node_modules/jquery-mask-plugin/dist/jquery.mask') 
     }, 
    } 
} 

誰も私を助けることができますか？

ありがとうございます。

Answer 1

は、あなたが解決-URL-ローダーにCSS-ローダのparamsを渡すように見える：

"css-loader!resolve-url-loader?modules=true&localIdentName=[name]__[local]___[hash:base64:5]" 

は次のようになります。

"css-loader?modules=true&localIdentName=[name]__[local]___[hash:base64:5]&importLoaders=1!resolve-url-loader" 

Answer 2

この質問からの経過時間の多くは、そう私のWebPACK別の技術で何度も更新されました。

このWebPACKのコンフィグが働いている：

... 
module.exports = { 
    entry, 
    output: { 
    filename: '[name].js', 
    path: path.resolve(__dirname, 'dist'), 
    publicPath: '/' 
    }, 
    devtool: 
    process.env.NODE_ENV === 'production' ? 'source-map' : 'inline-source-map', 

    module: { 
    rules: [ 
     { 
     test: /\.jsx?$/, 
     include: path.resolve(__dirname, './app/view/'), 
     exclude: /node_modules/, 
     loader: 'babel-loader' 
     }, 
     { 
     test: /\.pcss$/, 
     include: path.resolve(__dirname, './app/view/'), 
     use: [ 
      { 
      loader: 'style-loader' 
      }, 
      { 
      loader: 
       'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]' 
      }, 
      { 
      loader: 'postcss-loader', 
      options: { 
       plugins: function() { 
       return [ 
        require('postcss-import'), 
        require('postcss-mixins'), 
        require('postcss-cssnext')({ 
        browsers: ['last 2 versions'] 
        }), 
        require('postcss-nested'), 
        require('postcss-brand-colors') 
       ]; 
       } 
      } 
      } 
     ], 
     exclude: /node_modules/ 
     }, 
     { 
     test: /\.(png|svg|jpg|webp)$/, 
     use: { 
      loader: 'file-loader' 
     } 
     } 
    ] 
    }, 
    resolve: { 
    extensions: ['.js', '.jsx'], 
    modules: [path.resolve(__dirname, 'node_modules')] 
    }, 
    plugins 
}; 

私はこのラインでのWebPACKで旧バージョンとの問題があることが推測：

'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]' 

は、あなたができるimportLoadersとimportLoader

をお試しください私のrepoも参照してください。