Webpack 2 && css-loader on Windows 10 broken

Do you want to request a feature or report a bug?
report a bug I really wish was here and not lost somewhere else

What is the current behavior?
So running webpack 2.2.0 with webpack-dev-server 2.2.0 and everything works fine on Ubuntu but breaks on Windows. Output:

...
ERROR in ./src/components/shared/Entities/Flight/styles.css
Module parse failed: C:\Users\aseghatoleslami\Dev\octane-ui\src\components\shared\Entities\Flight\styles.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .container {
|   position: relative;
|   width: 400px;
 @ ./src/components/shared/Entities/Flight/index.js 2:0-34
 @ ./src/components/shared/Entities/index.js
 @ ./src/components/Analytics/DataView/Node/index.js
 @ ./src/containers/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://0.0.0.0:8080 webpack/hot/dev-server ./src/main.js

ERROR in ./src/components/shared/Entities/Person/Small/styles.css
Module parse failed: C:\Users\aseghatoleslami\Dev\octane-ui\src\components\shared\Entities\Person\Small\styles.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .container {
|   position: relative;
|   width: 400px;
 @ ./src/components/shared/Entities/Person/Small/index.js 5:0-34
 @ ./src/components/shared/Entities/index.js
 @ ./src/components/Analytics/DataView/Node/index.js
 @ ./src/containers/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://0.0.0.0:8080 webpack/hot/dev-server ./src/main.js

ERROR in ./src/components/shared/Entities/CDR/styles.css
Module parse failed: C:\Users\aseghatoleslami\Dev\octane-ui\src\components\shared\Entities\CDR\styles.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .container {
|   position: relative;
|   width: 400px;
 @ ./src/components/shared/Entities/CDR/index.js 2:0-34
 @ ./src/components/shared/Entities/index.js
 @ ./src/components/Analytics/DataView/Node/index.js
 @ ./src/containers/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://0.0.0.0:8080 webpack/hot/dev-server ./src/main.js

I’ve narrowed it down to these lines from this helpful issue which targets this:

}, {
  test: /styles\.css$/,
  include: /src\/components/,
  use: [{
    loader: 'style-loader'
  }, {
    loader: 'css-loader',
    options: {
      modules: true,
      sourceMap: true,
      importLoaders: 1,
      localIdentName: '[name]__[local]___[hash:base64:5]'
    }
  }]
}, {
  test: /\.css$/,
  include: /src\/css/,
  use: [{
    loader: 'style-loader'
  }, {
    loader: 'css-loader',
    options: {
      sourceMap: true
    }
  }]
}]

So – as mentioned in the issue – I removed the include options and it started working fine again. I then tried using include: resolve(__dirname, 'src', 'components'), thinking it was a Windows thing but that didn’t really help.

If the current behavior is a bug, please provide the steps to reproduce.
Use Webpack 2.2.0 and webpack-dev-server 2.2.0 and give the webpack config rules for css an include option

What is the expected behavior?
For there to be no Module parse failed: errors

Please mention other relevant information such as the browser version, Node.js version, webpack version and Operating System.
OS: Windows 10
Node: 6.9.4
webpack: 2.2.0
webpack-dev-server: 2.2.0
css-loader: 0.25.0

Author: Fantashit

1 thought on “Webpack 2 && css-loader on Windows 10 broken

  1. The funny thing is this wasn’t an issue last week, but I have no more info to help there.

    Going off of the Windows vs unix idea, we tried the following and it worked!

    {
      test: /styles\.css$/,
      include: /src(\/|\\)components/,            <-------- notice the (\/|\\)
      use: [{
        loader: 'style-loader'
      }, {
        loader: 'css-loader',
        options: {
          modules: true,
          sourceMap: true,
          importLoaders: 1,
          localIdentName: '[name]__[local]___[hash:base64:5]'
        }
      }]
    }, {
      test: /\.css$/,
      include: /src(\/|\\)css/,            <-------- notice the (\/|\\)
      use: [{
        loader: 'style-loader'
      }, {
        loader: 'css-loader',
        options: {
          sourceMap: true
        }
      }]
    }]
    

Comments are closed.