Code Is Bae

Load Multiple CSS Styles in Webpack 4

November 02, 20191 min read

Recently, while working on a personal project, I needed to import multiple stylesheet types and have them all bundled correctly by Webpack. Below was how I achieved it:

// Supported file loaders
  module: {
    rules: [
        test: /\.tsx?$/,
        loader: 'ts-loader',
        test: /\.(sa|sc|c)ss$/,
        use: [
          // Creates `style` nodes from JS strings
          // Translates CSS into CommonJS
          // Compiles Sass to CSS

The most important section in the above code snippet is /\.(sa|sc|c)ss$/. This is a regex that optionally loads files with the following extensions: .sass, .scss, or .css.

‒ ‒ ‒