Экспорт файла scss с помощью конфигурации веб-пакета

Question

У меня есть конфигурация Webpack, которая в настоящее время компилирует и экспортирует файлы css для моих компонентов. Я хочу расширить это, чтобы я мог экспортировать несколько общих переменных в свой пакет, чтобы другой проект мог использовать те же переменные.

У меня есть файл с именем colors.scss, который я хотел бы включить вмоя папка dist, но я не уверен, как включить ее в комплект.

Моя конфигурация веб-пакета выглядит следующим образом:

module: {
  rules: [
    {
      include: prefixUtilFilepath,
      use: [
        {
          loader: MiniCssExtractPlugin.loader,
        },
        {
          loader: 'css-loader',
        },
        {
          loader: 'postcss-loader',
        },
        {
          loader: 'sass-loader',
        },
      ],
    },
    {
      test: /\.scss$/,
      exclude: prefixUtilFilepath,
      use: [
        {
          loader: MiniCssExtractPlugin.loader,
        },
        {
          loader: 'css-loader',
        },
        {
          loader: 'sass-loader',
          options: {
            prependData: '@import "./constants/sass/manifest.scss";',
          },
        },
      ],
    },
    {
      test: /\.(png|jpg|jpeg|gif|svg)$/,
      use: [
        {
          loader: 'file-loader',
          options: {
            name: '[path][name].[ext]',
            context: '',
          },
        },
      ],
    },
  ],
},
plugins: [
  new MiniCssExtractPlugin({
    filename: '[name].css',
    path: path.resolve(__dirname, 'dist'),
  }),
 ],

Я попытался расширить конфигурацию довключите правило для файла переменных следующим образом:

{
  include: sassColorVariables,
  use: [
    {
      loader: MiniCssExtractPlugin.loader,
    },
  ],
},

Но я не уверен, как расширить конфигурацию плагина извлечения, чтобы не компилировать ее в css, а вместо этого проходить через файл scssв папку dist.

Как этого добиться?