Ignoring css from the other libraries in node modules

[eneyed]

Hi,

I am using a javascript plugin and its default stylesheets (by referring from the node_modules directory). When I enable the css modules, even the stylesheets referred from the directory gets locally scoped with hash. However, the class names from this plugin does not reflect the scoped names within the HTML, for obvious reasons that the plugin hasn't been written the css modules.

How can I ignore scoping of the stylesheets coming from the node_modules? Or what is the best way for the current scenario?

Thanks in advance!

[cristiano-belloni]

+1

[bluedaniel]

If anyone lands here I got round the issue by simply ignoring node_modules (or the folder that contains 3rd party css) and then another loader underneath for the 3rd party scripts.

{
  test: /\.css$/,
  exclude: /node_modules/, // Ignore the folder containing 3rd party scripts
  loader: ExtractTextPlugin.extract({
    loader: [
      {
        loader: 'css-loader',
        query: {
          modules: true,
          localIdentName: '[name]_[local]_[hash:base64:3]'
        }
      },
      'postcss-loader'
    ]
  })
}, {
  test: /leaflet.css$/, // A file or folder containing CSS you don't want mangled
  loader: ExtractTextPlugin.extract({
    loader: [
      {
        loader: 'css-loader',
        query: {
          modules: true,
          localIdentName: '[local]' // This will ensure the classname remains as it is
        }
      },
      'postcss-loader'
    ]
  })
}