Seems like webpack ignores 'include' and 'exclude' rules

Question

I have following folder setup:

app/
  scss/
    lib/
      grid.css
    main.scss
webpack/
  webpack.config.js

in my webpack.config.js I have following loaders to handle scss and css:

  {
    test: /\.(css|scss)$/,
    exclude: path.join(__dirname, '..', 'app/scss/lib/'),
    loader: ExtractTextPlugin.extract(
      'style-loader', 'css-loader?module!resolve-url!postcss-loader!sass-loader?sourceMap'
    )
  },
  {
    test: /\.(css|scss)$/,
    include: path.join(__dirname, '..', 'app/scss/lib/'),
    loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
  }

idea here is that css-loader uses modules essentially rewriting a class name like .red to something random like .JHSKJasdasa however, I want it to exclude /lib folder and leave classes that are in it same as they are (vanilla), however still, classes inside grid.css like .container become randomized.

Answer 1

Likely answer is that webpack is getting confused by the path.join - documentation specifies path.resolve. I think it might do a straight string comparison of the paths, so the relative .. is breaking it, therefore the exclusion/inclusion isn't working correctly. path.resolve should resolve to the absolute path.

If that doesn't work, try adding a folder app/scss/src (or similar) to separate out the code you want to use css-loader on. Then include that rather than excludeing lib.