Webpack - resolve-url-loader无法运行：CSS错误

Question

我为我的javascript设置了一个Webpack配置并运行顺畅，但是当我尝试将PostCSS添加到同一个配置时，出现了一些问题。它实际上是有效的，并产生我的CSS，但它同时抛出一些我曾经非常困难的奇怪错误。

$ npm run env:dev -- webpack-dev-server
> arc@0.1.0 env:dev /Users/mattias/projects/pestbarn.github.io
> cross-env NODE_ENV=development "webpack-dev-server"

Project is running at http://localhost:3000/
webpack output is served from /

WARNING in ./src/postcss/base.postcss
(Emitted value instead of an instance of Error) resolve-url-loader cannot operate: CSS error
    ENOENT: no such file or directory, open 'src/postcss/%3Cno%20source%3E'
    at Object.fs.openSync (fs.js:584:18)
    @ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./src/postcss/base.postcss webpack/hot/only-dev-server

Child extract-text-webpack-plugin:

WARNING in ./~/css-loader?importLoaders=1!./~/resolve-url-loader!./~/postcss-loader/lib?sourceMap=inline!./src/postcss/base.postcss
(Emitted value instead of an instance of Error)   resolve-url-loader cannot operate: CSS error
    ENOENT: no such file or directory, open '/Users/mattias/projects/pestbarn.github.io/src/postcss/%3Cno%20source%3E'
      at Object.fs.openSync (fs.js:584:18)

webpack: Compiled with warnings.

webpack.config.js :(根据Diego Haz的Atomic React

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const devServer = require('@webpack-blocks/dev-server2');
const splitVendor = require('webpack-blocks-split-vendor');
const happypack = require('webpack-blocks-happypack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const {
    addPlugins, createConfig, entryPoint, env, setOutput,
    sourceMaps, defineConstants, webpack
} = require('@webpack-blocks/webpack2');

const host = process.env.HOST || 'localhost';
const port = process.env.PORT || 3000;
const sourceDir = process.env.SOURCE || 'src';
const publicPath = `/${process.env.PUBLIC_PATH || ''}/`.replace('//', '/');
const sourcePath = path.join(process.cwd(), sourceDir);
const outputPath = path.join(process.cwd(), 'dist');

const babel = () => () => ({
    module: {
        rules: [
            { test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel-loader' }
        ]
    }
});

const assets = () => () => ({
    module: {
        rules: [
            { test: /\.(png|jpe?g|svg|woff2?|ttf|eot)$/,
                loader: 'url-loader?limit=8000' }
        ]
    }
});

const postcssLoader = () => () => ({
    module: {
        rules: [
            {
                test: /\.postcss$/,
                exclude: /node_modules/,
                loader: ExtractTextPlugin.extract({
                    use: 'css-loader?importLoaders=1!resolve-url-loader!postcss-loader?sourceMap=inline'
                })
            }
        ]
    }
});

const resolveModules = modules => () => ({
    resolve: {
        modules: [].concat(modules, ['node_modules']),
    },
});

const config = createConfig([
    entryPoint({
        app: path.join(sourcePath, 'index.js'),
        'main.css': path.join(sourcePath, 'postcss/base.postcss')
    }),
    setOutput({
        filename: '[name]',
        path: outputPath,
        publicPath
    }),
    defineConstants({
        'process.env.NODE_ENV': process.env.NODE_ENV,
        'process.env.PUBLIC_PATH': publicPath.replace(/\/$/, '')
    }),
    postcssLoader(),
    addPlugins([
        new webpack.ProgressPlugin(),
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: path.join(process.cwd(), 'public/index.html')
        }),
        new ExtractTextPlugin('main.css'),
    ]),
    happypack([
        babel()
    ]),
    assets(),
    resolveModules(sourceDir),

    env('development', [
        devServer({
            contentBase: 'public',
            stats: 'errors-only',
            historyApiFallback: { index: publicPath },
            headers: { 'Access-Control-Allow-Origin': '*' },
            host,
            port
        }),
        sourceMaps(),
        addPlugins([
            new webpack.NamedModulesPlugin()
        ]),
    ]),

    env('production', [
        splitVendor(),
        addPlugins([
            new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }),
        ])
    ]),
]);

module.exports = config;

postcss.config.js

module.exports = {
    plugins: [
        require('postcss-import'),
        require('postcss-cssnext'),
        require('precss'),
        require('postcss-font-magician'),
        require('postcss-automath')
    ]
};