How to include all CSS files in node_modules to be built by css-loader?

832 Views Asked by At

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',
      ],
    }),
  }
1

There are 1 best solutions below

0
On

Webpack won't include the CSS files unless you explicitly import them from your javascript code. So you'll need:

import 'some_package/css/component.css';

in the part of your app that uses the CSS.

Alternatively you could use something like glob-loader to do

import 'glob-loader?node_modules_pattern_file';

and then have your "node_modules_pattern_file" include a glob like

../node_modules/**/*.css

...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.