Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

exclude directories in webpack loader

Tags:

webpack

I'm attempting to use css-modules in my webpack project but I'm also using some css from packages in node_modules. How do I write a loader(s) to only use modules in my module directory and not in the node_modules directory? I tried the following but it borks. It looks like it's trying to apply the modules stuff to the css in node_modules.

  {
    test: /\.css$/,
    loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
    include: [
      path.resolve(__dirname, 'modules')
    ]
  },
  { 
    test: /\.css$/, 
    loader: 'style!css',
    include: [
      path.resolve(__dirname, 'node_modules')
    ]
  },
like image 523
David Avatar asked Apr 06 '16 18:04

David


Video Answer


1 Answers

For those finding this now (like me), I got this to work by defining complementary exclude rules in my webpack config:

{
  test: /\.css$/,
  loader: 'css-loader',
  exclude: /my_app_client_dir/,
  query: {
    modules: true,
    localIdentName: '[local]' // no funny stuff with node_modules resources
  }
},
{
  test: /\.css$/,
  exclude: /node_modules/,
  loader: 'css-loader',
  query: {
    modules: true,
    localIdentName: '[name]__[local]___[hash:base64:5]'
  }
}

When writing this without exclude rules on both loaders, I got a compile error from webpack.

like image 154
weavile Avatar answered Sep 20 '22 15:09

weavile