./~/css-loader!./~/postcss-loader/lib!./~/rc-range-slider/lib/Slider/slider.css 中的错误

Question

当我尝试使用 Webpack ^2.5.1 编译我的 react 项目时，我将 rc-range-slider 包添加到我的项目中，并开始收到下一段中列出的错误消息。 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' )
                }
            }
        }

constants.process.env.NODE_ENV 将始终为 true，因为只有空字符串会返回 false。所以你总是会映射

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

你错过了一行

( 细节[ n ] || {} )

工作示例。

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

demo中也没有postcss-browser-reporter包