如何从 webpack 入口点排除文件

Question

I am using the following webpack config to handle / load all of my sass files. One important item is that I am using additionalData to preappend my common styles. This is causing a conflict, however, because my entry for webpack is any and all sass files, which means that my commonStyles.scss is already getting loaded. When I run my app, I get the following error:

errorMessage:

SassError: This file is already being loaded.
  ╷
1 │ @import "src/styles/commonStyles.scss";
  │         ^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src/styles/sizes.scss 1:9  root stylesheet

How can I create an entry point that includes all sass files in my app except for / excluding commonStyles.scss (or better yet, any files in the /src/styles/ folder)? Thanks for the help!

webpack config:

'use strict';

const fs = require('fs');
const glob = require('glob');
const path = require('path');

const sassRegex = /\.(scss|sass)$/;

module.exports = {
  mode: 'production',
  bail: true,
  devtool: false,
  entry: glob.sync(`${path.resolve(fs.realpathSync(process.cwd()), 'src')}/**/*.{css,scss}`),
  output: {
    path: 'build',
  },
  module: {
    rules: [
      {
        test: sassRegex,
        exclude: /node_modules/,
        use: [
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true,
              additionalData: `@import "src/styles/commonStyles.scss";`,
            },
          },
        ],
      },
    ],
  },
};

Answer 1

Instead of /**/*.{css,scss} try /**/.{commonStyles},{css,scss}

Alternatively:

entry: glob.sync(
  `${path.resolve(fs.realpathSync(process.cwd()), 'src')}/**/*.{css,scss}`,
  ignore: [
    '**/src/styles/commonStyles.scss',
  ],
),