title: How do I share components with external Sass stylesheets in ReactJS
body: <p>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.</p>
  <p>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.</p>
  <pre><code>lerna exec --scope shared -- babel src -d dist --copy-files
  </code></pre>
  <p>where <code>shared</code> is my package containing shared components. Above command puts the transpiled JS and CSS files in the <code>dist</code> folder.</p>
  <p>However, I have <code>.scss</code> 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.</p>
  <p>I think I understand why it must not be working. In CRA project whenever we use <code>.scss</code> file I think Webpack preprocesses these into <code>.css</code> files. In this is not happening hence the issue. Correct me if I am wrong.</p>
  <p>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 <code>dist</code>. Please see the folder structure below. <code>shared</code> is the package with shared components and <code>myapp</code> package uses the shared components.</p>
  <pre><code>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
  
  </code></pre>
  <p>My <code>webpack.config.js</code></p>
  <pre><code>// 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' }
          ]
      }
  };
  </code></pre>
  <p>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.</p>
  <p>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 <code>dist</code> folder without bundling them into a single file and also to preprocess the <code>.scss</code> files and use them in the transpiled files.</p>