I am trying to extract all the CSS files found in the node_modules
directory into a single file. My Webpack config is as follows:
{ // node_modules css in /node_modules/**/*.css
test: /\.css$/,
include: /node_modules/,
// extract to the node modules css file
use: ExtractTextPluginNodeMods.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
modules: false,
},
},
],
}),
}
Unfortunately, none of the CSS files in the node_modules
directory are being bundled into the file specified with ExtractTextPluginNodeMods
. I have another ExtractTextPlugin
instance that is successfully extracting CSS from my src
directory. Any idea why I cannot get extraction of CSS from node_modules
?
For reference, my other ExtractTextPlugin
/Webpack config (which is bundling all of my CSS is here:
{
// OUR css in /src/
// the css output from sass loader will be caught here
// fonts are imported by css loader
// after transpiling of sass -> css, css-loader in webpack should take care of this
// https://github.com/webpack-contrib/css-loader
test: /\.css$/,
exclude: /node_modules/,
// extract to our css file
use: ExtractTextPluginSrc.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
// create modular css with the '[name]__[local]___[hash:base64:5]'
options: {
modules: true,
localIdentName: '[name]__[local]___[hash:base64:5]',
},
},
'postcss-loader',
],
}),
}
Webpack won't include the CSS files unless you explicitly import them from your javascript code. So you'll need:
in the part of your app that uses the CSS.
Alternatively you could use something like glob-loader to do
and then have your "node_modules_pattern_file" include a glob like
...but I don't recommend this approach because you'll end up pulling in loads of files you don't need and it will be hard to maintain.