Import all sass file within directory with webpack

When webpack 3 or 4

Use node-sass-glob-importer

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const globImporter = require('node-sass-glob-importer');

    ...
    test: /\.(scss|sass)$/,
    use: [
      MiniCssExtractPlugin.loader,
      "css-loader",
      {
        loader: "sass-loader",
        options: {
          sassOptions: {
            importer: globImporter()
          }
        }
      }
    ]

Use this way.

// Import all files inside the `scss` directory and subdirectories.
@import 'scss/**/*.scss';
@import 'scss/component-*';

Note - only works with webpack 2 (requires update for webpack 3^)

You could use the plugin import-glob-loader github / npm

It supports globbing with

@import "foo/**/*";

which outputs to

@import "foo/1.scss";
@import "foo/bar/2.scss";
@import "foo/bar/3.scss";