How do I share components with external Sass stylesheets in ReactJS

Question

I am trying to build a monorepo for my React projects as most of the code is shared between a few of my projects. I am using Yarn workspaces and Lerna for this.

I have managed to get a basic example working where the React component is shared between two projects. In this working example, however, the stylesheet is a plain CSS stylesheet and is correctly imported. I am using Babel to transpile the React and ES6 code.

lerna exec --scope shared -- babel src -d dist --copy-files

where shared is my package containing shared components. Above command puts the transpiled JS and CSS files in the dist folder.

However, I have .scss files in my actual code base. Hence trying to replace external CSS file with external SCSS file in the example project. However, it doesn't work. The stylesheet isn't applied.

I think I understand why it must not be working. In CRA project whenever we use .scss file I think Webpack preprocesses these into .css files. In this is not happening hence the issue. Correct me if I am wrong.

I tried using Webpack instead of Babel. However, the issue that I faced was Webpack bundled all files into a single file which is something I don't want. I want that the individual component file should be transpiled and kept in the same folder structure under dist. Please see the folder structure below. shared is the package with shared components and myapp package uses the shared components.

workspace
--packages
  --shared
    --dist
      --components
          --button
            --Button.js
            --Button.scss
          --header
            --Header.js
            --Header.scss
    --src
       --components
          --button
            --Button.js
            --Button.scss
          --header
            --Header.js
            --Header.scss 

  ---myapp

My webpack.config.js

// Webpack uses this to work with directories
const path = require('path');
const webpack = require('webpack');

module.exports = {

    entry: './src/index.js',

    // Path and filename of the result bundle.
    // Webpack will bundle all JavaScript into this file
    output: {
        path: path.resolve(__dirname, 'dist'),
        libraryTarget: 'commonjs2'
        //filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                }
            },
            { test: /\.css$/, use: ['style-loader', 'css-loader'] },
            { test: /\.(jpg|png|gif|svg|tiff)$/, use: 'file-loader' },
            { test: /\.(woff|woff2|eot|ttf|otf)$/, use: 'file-loader' }
        ]
    }
};

I am stuck at this point as I am not sure how I can import SCSS file in my React component which can be shared.

I'm not sure if there is a way to tell Webpack and Babel to transpile the React files and just put them in the dist folder without bundling them into a single file and also to preprocess the .scss files and use them in the transpiled files.