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')
]
},
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With