使用webpack配置导出scss文件

Question

我有Webpack配置，该配置当前正在为我的组件编译和导出css文件。我希望对此进行扩展，以便可以导出捆绑中的多个共享变量，以便另一个项目可以使用相同的变量。

我有一个名为colors.scss的文件，希望将其包含在dist文件夹中，但是我不确定如何将其包含在捆绑软件中。

我的webpack配置如下：

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文件夹中。

如何实现？