Как в Webpack использовать общие стили на разных страницах?

Разбираюсь с Webpack, в проекте несколько страниц. Столкнулся с такой проблемой, что при сборке для каждой страницы создается свой .css файл, в которых большая часть кода повторяется. Вопрос: можно ли сделать так, чтобы создавался один файл стилей, либо общие стили + уникальные для каждой страницы.

webpack.config.js:

module.exports = {
  entry: {
    index: ['@babel/polyfill', './src/index.js'],
    about: ['@babel/polyfill', './src/pages/about/index.js'],
    //....
  },
  output: {
    filename: 'js/[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    //...
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'src', 'index.html'),
      title: 'index',
      filename: 'index.html',
    }),
    
    new HtmlWebpackPlugin({
      template: './src/pages/about/index.html',
      title: 'about',
      filename: 'about.html',
      inject: true,
      chunks: ['about'],
    }),
    //...
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css',
    }),
    //...
  ],
}

index.js (main page)

import 'normalize.css/normalize.css';
import './styles.scss';//Общие стили
import './main.scss';
//...

index.js (about page)

import 'normalize.css/normalize.css';
import './styles.scss';//Общие стили
import './about.scss';
//...

На примере двух страниц. Создаются два файла стилей, в каждом повторяется код из normalize.css и styles.css