ERROR in ./~/css-loader!./~/postcss-loader/lib!./~/rc-range-slider/lib/Slider/slider.css

Question

rc-range-sliderパッケージを追加しました。私のプロジェクトとWebpack^2.5.1を使用して私の反応プロジェクトをコンパイルしようとすると、次の段落に記載されているエラーメッセージを取得し始めた。このスライダのNPMサイトに推奨されているwebpack設定は、webpackの以前のバージョンと互換性があります。以下の最後の段落のWebpack構成は、新しいWebpack構成制約に適合させようとしたものです。しかし、私は次のエラーメッセージを取得しています：

以下Github

ERROR in ./~/css-loader!./~/postcss-loader/lib!./~/rc-range-slider/lib/Slider/slider.css 
Module build failed: Error: No PostCSS Config found in: \js\node_modules\rc-range-slider\lib\Slider 
    at Error (native) 
    at \js\node_modules\postcss-load-config\index.js:51:26 
@ ./~/style-loader!./~/css-loader!./~/postcss-loader/lib!./~/rc-range-slider/lib/Slider/slider.css 4:14-105 18:2-22:4 19:20-111 
@ ./~/rc-range-slider/lib/Slider/slider.css 
@ ./~/rc-range-slider/lib/Slider/index.js 
@ ./~/rc-range-slider/lib/index.js 
@ ./src/search-component.jsx 
@ ./src/search-component.jsx 
@ ./src/search-container.js 
@ ./src/routes.js 
@ ./src/index.js 
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server babel-polyfill webpack-dev-server/client?http://localhost:8080 webpack/hot/only-dev-server ./src/index.js 

ERROR in ./~/css-loader!./~/postcss-loader/lib!./~/rc-tipso/lib/Tipso/BaseTipso/base_tipso.css 
Module build failed: Error: No PostCSS Config found in: \js\node_modules\rc-tipso\lib\Tipso\BaseTipso 
    at Error (native) 
    at \js\node_modules\postcss-load-config\index.js:51:26 
@ ./~/style-loader!./~/css-loader!./~/postcss-loader/lib!./~/rc-tipso/lib/Tipso/BaseTipso/base_tipso.css 4:14-115 18:2-22:4 19:20-121 
@ ./~/rc-tipso/lib/Tipso/BaseTipso/base_tipso.css 
@ ./~/rc-tipso/lib/Tipso/BaseTipso/index.js 
@ ./~/rc-tipso/lib/Tipso/index.js 
@ ./~/rc-tipso/lib/index.js 
@ ./~/rc-range-slider/lib/Slider/Dragger.js 
@ ./~/rc-range-slider/lib/Slider/index.js 
@ ./~/rc-range-slider/lib/index.js 
@ ./src/search-component.jsx 
@ ./src/search-component.jsx 
@ ./src/search-container.js 
@ ./src/routes.js 
@ ./src/index.js 
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server babel-polyfill webpack-dev-server/client?http://localhost:8080 webpack/hot/only-dev-server ./src/index.js 
webpack: Failed to compile. 

でデモを見てください、私のWebPACKの構成です：

var webpack = require('webpack'), 
    merge = require('lodash/merge'), 
    ExtractTextPlugin = require('extract-text-webpack-plugin'), 
    hotModuleReplacement = new webpack.HotModuleReplacementPlugin(), 
    constants = { 
      process:{ 
       env: { 
        NODE_ENV: JSON.stringify('development') 
       } 
      } 
     }, 
    extractSass = new ExtractTextPlugin({ 
      allChunks: true, 
      disable: constants.process.env.NODE_ENV !== 'development', 
      filename: 'public/main.css' 
     }), 
    getStylesheets = function(...names){ 
      const options = { 
        data: '$env: ' + constants.process.env.NODE_ENV + ';', 
        includePaths: [ 'res/main', 'node_modules' ], 
        sourceMap: true 
        }, 
        specifics = { 
        css: { 
         modules: true, 
         importLoaders: 1, 
         localIdentName: '[name]__[local]___[hash:base64:5]', 
        }, 
        postcss: { 
         postcss:() => [ 
          require('postcss-import')({ 
            addDependencyTo: webpack 
           }), 
          require('postcss-url')(), 
          require('postcss-cssnext')(), 
            // add your <plugins> here 
            // ... 
            // and if you want to compress, 
            // just use css-loader option that already use cssnano under the hood 
          require('postcss-browser-reporter')(), 
          require('postcss-reporter')() 
         ] 
        }, 
        }; 
      return names.map( 
        constants.process.env.NODE_ENV ? 
        n => ({ loader: n + '-loader' }) : 
        n => ({ loader: n + '-loader', options: merge({}, options, (specifics[ n ] | {}))})); 
     }, 
    getJSX = (...names) => 
     names.map(n => ({ 
      test: /\.jsx?$/, 
      exclude: /node_modules/, 
      loader: n + '-loader', 
      query: { 
       plugins: [ 'transform-decorators-legacy', 'transform-runtime' ], 
       presets: [ 'latest', 'react', 'airbnb' ] 
      } 
     })); 

module.exports = { 
    entry: [ 
     'babel-polyfill', 
     'webpack-dev-server/client?http://localhost:8080', 
     'webpack/hot/only-dev-server', 
     './src/index.js' 
    ], 
    devtool: 'source-map', 
    module: { 
     rules:[ 
      ...getJSX('react-hot', 'babel'), 
      { 
       test: /\.css$/, 
       use: extractSass.extract({ 
        use: getStylesheets('style', 'css', 'postcss'), 
        fallbackLoader: 'style-loader' 
       }) 
      } 
     ], 
    }, 
    resolve: { 
     extensions: ['.jsx', '.js', '.json', 'css'] 
    }, 
    output: { 
     path: __dirname, 
     publicPath: '/', 
     filename: 'main.js' 
    }, 
    devServer: { 
     historyApiFallback: true, 
     contentBase: './webpack_html', 
     hot: true 
    }, 
    plugins: [ hotModuleReplacement, extractSass, new webpack.DefinePlugin(constants)] 
}; 

Answer 1

すべての魔法がgetStylesheetsです。 ここ

return names.map( 
        constants.process.env.NODE_ENV ? 
        n => ({ loader: n + '-loader' }) : 
        n => ({ loader: n + '-loader', options: merge({}, options, (specifics[ n ] | {}))})); 

あなたは

constants = { 
      process:{ 
       env: { 
        NODE_ENV: JSON.stringify('development') 
       } 
      } 
     } 

を持っているだけで、空の文字列はfalseを返しますので、constants.process.env.NODE_ENVは常に真になります。だから、常に

n => ({ loader: n + '-loader' }) 

をマッピングし、あなたは1行

(specifics[ n ] || {})

の作業例を欠場します。

return names.map(
     constants.process.env.NODE_ENV !== '"development"' ? 
       n => ({ loader: n + '-loader' }) : 
    n => ({ loader: n + '-loader', options: merge({}, options, (specifics[ n ] || {}))})); 

はまた、デモにはpostcssブラウザ-レポーターパッケージが存在しない