PostCSS Module Parse Failed on Windows 10 build - reactjs

Question

I'm running into an interesting error with my react build. My configuration runs perfectly fine on my Mac, but I get the following error when running on my Windows 10 computer:
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
Here's my 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
}
}
And for good measure, here's my .babelrc config
{
"presets": [
[ "es2015", { "modules": false } ],
"latest",
"react"
],
"plugins": ["react-hot-loader/babel", "syntax-dynamic-import"],
"env": {
"test": {
"plugins": ["dynamic-import-node"]
}
}
}
No idea why the error occurs when compiling on Windows 10 but works perfectly on my Mac. I can't seem to find any current info regarding this issue for either PostCSS or Webpack 2.
Any ideas?

Answer 1

just remove
include: [
/(node_modules)\/react-toolbox/,
path.join(__dirname, 'src')
]
from test: /\.css$/ rule