title: Webpack Automatically import css from node modules
body: <p><strong><em>TL;DR: Is there any way to automatically scan or automatically import all stylesheets used by our web packages, from our node_modules folder?</em></strong></p>
  
  <p>I am working on a project that uses angularJS as its MVC framework, and we are currently in the process of migrating to use webpack. I currently wrote the following configuration:</p>
  
  <pre><code>const path = require('path');
  const webpack = require('webpack');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  
  const bbProperties = require('./webpack.properties');
  const appRoot = __dirname + "/../../..";
  
  console.log('__dirname:', __dirname);
  
  module.exports = {
      entry: {
          app: appRoot + bbProperties.app.entryScript,
          login: appRoot + bbProperties.login.entryScript
      },
      output: {
          path: appRoot +  bbProperties.distFolder,
          publicPath: "dist",
          filename: "js/[name].bundle.js",
      },
      module: {
          rules: [
              {
                  test: /\.js$/,
                  loader: 'babel-loader',
                  exclude: /node_modules/,
                  query: {
                      presets: ['es2017']
                  }
              },
              {
                  test: /\.css$/,
                  //exclude: /node_modules/,
                  use: [
                      {loader: 'style-loader'},
                      {loader: 'css-loader', query: {importLoaders: 1}},
                      {loader: 'postcss-loader', query: {config: {path: __dirname+'/postcss.config.js'}}}
                  ]
              },
              {
                  test: /\.(png|jpg|jpeg|gif)$/,
                  exclude: /node_modules/,
                  use: [
                      {
                          loader: 'file-loader',
                          options: {
                              name:'[name].[ext]',
                              outputPath:"/assets/images/"
                          }
                      }
                  ]
              },
              {
                  test: /\.(ttf|eot|woff|woff2|svg)($|\?.*$)/,
                  exclude: /node_modules/,
                  use: [
                      {
                          loader: 'file-loader',
                          options: {
                              name:'[name].[ext]',
                              outputPath:"/assets/fonts/"
                          }
                      }
                  ]
              },
          ]
      },
      plugins: [
          new webpack.ProvidePlugin({
              $: "jquery",
              jQuery: "jquery",
              "window.jQuery": "jquery",
              moment: "moment"/*,
              _: "lodash",
              "window._": "lodash",
              angular: "angular"*/
          }),
          //Creates an html file with all bundles injected as &lt;script&gt; tags
          new HtmlWebpackPlugin({
              chunks: ['app'],
              filename: '../angular-app/menu/' + bbProperties.app.outputFile,
              hash: "true", //cache busting
              template: appRoot + bbProperties.app.location + "/" + bbProperties.app.inputFile
          }),
          //Second html bundle for login page
          new HtmlWebpackPlugin({
              chunks: ['login'],
              filename: '../'+bbProperties.login.outputFile,
              hash: "true", //cache busting
              template: appRoot + bbProperties.login.location + "/" + bbProperties.login.inputFile
          })
      ],
      stats: {colors: true},
      devtool: 'source-map',
      node: {
          fs: "empty"
      }
  };
  </code></pre>
  
  <p>As far as I understand, webpack will start creating a bundle from each entry file, adding any file it encounters in import statements recursively.</p>
  
  <p>I also understand that I can require a package from my node_modules directory, and that in such a case webpack will search for a package.json file and import the file specified in the 'main' property of that file.</p>
  
  <p>Lets say we are dependant on several packages, components and frameworks (for example: angular-ui-grid, angular-material etc...), I know I can manually import their CSS files using css loaders by importing them into my JS code.</p>
  
  <p>Is there any way to automatically scan or automatically import all stylesheets used by those packages, from our node_modules folder?</p>