title: Webpack throwing error "File to import not found or unreadable: modules/*."
body: <p>I am trying to import a bunch of scss files to main styles.scss but in the webpack compilation I get an error
  &quot;File to import not found or unreadable: modules/*.&quot;
  Here is my webpack.config.js:</p>
  <pre><code>import path from &quot;path&quot;;
  import { fileURLToPath } from &quot;url&quot;;
  import webpack from &quot;webpack&quot;;
  import CopyWebpackPlugin from &quot;copy-webpack-plugin&quot;;
  import { CleanWebpackPlugin } from &quot;clean-webpack-plugin&quot;;
  import sass from &quot;node-sass&quot;;
  import MiniCssExtractPlugin from &quot;mini-css-extract-plugin&quot;;
  
  const __filename = fileURLToPath(import.meta.url);
  const __dirname = path.dirname(__filename);
  
  const config = {
    entry: &quot;./src/global/js/main.js&quot;,
    module: {
      rules: [
        {
          test: /\.s[ac]ss$/i,
          use: [
            &quot;style-loader&quot;,
            MiniCssExtractPlugin.loader,
            {
              loader: &quot;css-loader&quot;,
              options: {
                minimize: true,
                sourceMap: true,
              },
            },
            {
              loader: &quot;sass-loader&quot;,
              options: {
                includePaths: [path.resolve(path.join(__dirname, &quot;src&quot;, &quot;global&quot;, &quot;css&quot;, &quot;modules&quot;))]
              }
            },
            {
              loader: &quot;sass-bulk-import&quot;
            }
          ],
        },
      ],
    },
    watch: true,
    watchOptions: {
      ignored: /node_modules/,
    },
    plugins: [
      new MiniCssExtractPlugin({
        filename: &quot;styles.css&quot;,
      }),
      new CopyWebpackPlugin({
        patterns: [
          {
            from: `src/global/css/styles.scss`,
            to: `presentations/shared/css/styles.css`,
            transform(content, absoluteFrom) {
              const result = sass.renderSync({
                file: absoluteFrom,
              });
              return result.css.toString();
            },
          },
        ],
      }),
      new CleanWebpackPlugin({
        cleanStaleWebpackAssets: false,
      }),
    ],
  };
  export default config;
  </code></pre>
  <p>And this is my styles.scss:</p>
  <pre><code>@import &quot;reset.scss&quot;;
  @import &quot;fonts.scss&quot;;
  @import 'modules/*';
  </code></pre>
  <p>And folder sctructure:
  <a href="https://i.stack.imgur.com/ulI0P.png" rel="nofollow noreferrer">enter image description here</a></p>
  <p>What should I change in webpack.config to run this well?</p>