Webpack output multiple scss files (one compiled and one not compiled)

Question

Is it possible to configure webpack so that it outputs an uncompiled scss file alongside compiled scss?

I'm looking to expose scss variables, mixins, and functions this way.

files:

styles/
  index.scss

webpack.config.js:

module.exports = {
  entry: path.resolve(__dirname, "./src/index.js"),
  plugins: [
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: "./lib/index.css",
    }),
  ],
  module: {
    rules: [
      {
        test: /\.scss$/i,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: require.resolve("sass-loader"),
            options: {
              warnRuleAsWarning: true,
              sourceMap: true,
              sassOptions: {
                includePaths: ["../../node_modules"],
                outputStyle: "compressed",
                outFile: path.resolve(__dirname, "./lib/index.css"),
              },
            },
          },
        ],
      }
    ]
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js", ".css", ".scss"],
  },
  output: {
    filename: "[name].js",
    library: {
      type: "umd",
      name: "design-system",
    }
  }
};

example output:

lib/
  index.css (compiled version)
  index.scss (uncompiled version)

Answer 1

I think that's impossible unless you use a different plugin for it, so I would recommend to use copy-webpack-plugin in this use case.

// npm i -D copy-webpack-plugin
// yarn add -D copy-webpack-plugin

const CopyPlugin = require("copy-webpack-plugin");

module.exports = {
  // ...
  plugins: [
    new CopyPlugin({
      patterns: [
        { from: "./styles/index.scss", to: "./lib/" },
      ],
    }),
  ],
};