PostCSS-Modul Parse fehlgeschlagen auf Windows 10 Build

Question

Ich bin in einem interessanten Fehler mit meiner Reaktion Build. Meine Konfiguration läuft perfekt auf meinem Mac, aber ich bekomme die folgende Fehlermeldung, wenn auf meinem Windows 10 Computer ausgeführt wird:

ERROR in ./~/react-toolbox/lib/app_bar/theme.css 
Module parse failed: C:\cygwin64\home\username\projectname\node_modules\react-toolbox\lib\app_bar\theme.css Unexpected token (1:0) 
You may need an appropriate loader to handle this file type. 
| :root { 
| --palette-red-50: rgb(255, 235, 238); 
| --palette-red-100: rgb(255, 205, 210); 
@ ./~/react-toolbox/lib/app_bar/index.js 16:13-35 
@ ./src/containers/app/app.js 
@ ./src/index.js 
@ multi react-hot-loader/patch ./src/index.js 

Hier ist mein Webpack 2 Config

'use strict' 
const webpack = require('webpack') 
const path = require('path') 
const CopyWebpackPlugin = require('copy-webpack-plugin') 
const ExtractTextPlugin = require('extract-text-webpack-plugin') 
const postcssImport = require('postcss-import') 
const postcssCssnext = require('postcss-cssnext') 

// configure source and distribution folder paths 
const publicFolder = 'public' 
const buildFolder = 'build' 

module.exports = { 
    entry: { 
    'app': [ 
     'react-hot-loader/patch', 
     './src/index.js' 
    ] 
    }, 
    resolve: { 
    //Allows us to leave off the file extension when importing 
    extensions: ['.js', '.json', '.jsx'] 
    }, 
    module: { 
    rules: [ 
     { 
     enforce: 'pre', 
     test: /\.js$/, 
     exclude: '/node_modules/', 
     loader: 'eslint-loader', 
     }, 
     { 
     test: /\.(js|jsx)$/, 
     exclude: '/node_modules/', 
     loader: 'babel-loader' 
     }, 
     { 
     test: /\.css$/, 
     include: [ 
      /(node_modules)\/react-toolbox/, 
      path.join(__dirname, 'src') 
     ], 
     use: ExtractTextPlugin.extract({ 
      fallback: 'style-loader', 
      use: [ 
      { 
       loader: 'css-loader', 
       options: { 
       modules: true, 
       sourceMap: true, 
       importLoaders: 1 
       } 
      }, 
      { 
       loader: 'postcss-loader', 
       options: { 
       sourceMap: 'inline', 
       plugins: function() { 
        return [ 
        postcssImport({ addDependencyTo: webpack }), 
        postcssCssnext({ 
         browsers: ['last 2 versions', '> 5%'], 
         compress: true, 
        }) 
        ] 
       }, 
       }, 
      } 
      ] 
     }) 
     } 
    ] 
    }, 

    plugins: [ 
    new ExtractTextPlugin({ 
     filename: '[name].bundle.css', 
     allChunks: true 
    }), 
    new CopyWebpackPlugin([{ 
     from: path.join(__dirname, publicFolder, 'index.html'), 
     to: path.join(__dirname, buildFolder, 'index.html') 
    }]), 
    new CopyWebpackPlugin([{ 
     from: path.join(__dirname, publicFolder, 'demo.html'), 
     to: path.join(__dirname, buildFolder, 'demo.html') 
    }]), 
    new CopyWebpackPlugin([{ 
     from: path.join(__dirname, publicFolder, 'demo.js'), 
     to: path.join(__dirname, buildFolder, 'demo.js') 
    }]), 
    new webpack.NamedModulesPlugin() 
    ], 

    output: { 
    path: path.resolve(__dirname, buildFolder), 
    filename: '[name].js', 
    publicPath: '/' 
    }, 

    devtool: 'eval', 

    devServer: { 
    // files are served from this folder 
    contentBase: path.join(__dirname, 'build'), 

    // support HTML5 History API for react router 
    historyApiFallback: true, 

    // listen to port 5000, change this to another port if another server 
    // is already listening on this port 
    port: 5000, 

    //match the output 'publicPath' 
    publicPath: '/', 

    //Proxies to match requests to our Django API endpoints 
    proxy: { 
     '/api': { 
     target: 'http://localhost:4000' 
     } 
    }, 
    hot: true 
    } 
} 

Und für eine gute Maßnahme, hier ist meine. babelrc Config

{ 
    "presets": [ 
    [ "es2015", { "modules": false } ], 
    "latest", 
    "react" 
    ], 
    "plugins": ["react-hot-loader/babel", "syntax-dynamic-import"], 
    "env": { 
    "test": { 
     "plugins": ["dynamic-import-node"] 
    } 
    } 
} 

Keine Ahnung, warum der Fehler tritt auf, wenn unter Windows 10 kompilieren aber funktioniert perfekt auf meinem Mac. Ich kann anscheinend keine aktuellen Informationen zu diesem Problem für PostCSS oder Webpack 2 finden.

Irgendwelche Ideen?

Answer 1

entfernen Sie einfach

include: [ 
      /(node_modules)\/react-toolbox/, 
      path.join(__dirname, 'src') 
     ] 

von test: /\.css$/ Regel