title: SCSS React Library compilation
body: <p>I have a problem when I try to compile my React library.</p>
  <p>I have 2 projects: my-library and web-app.</p>
  <ul>
  <li>my-library contains all components</li>
  <li>web-app use my-library components</li>
  </ul>
  <p>When I compile my-library project make a folder named lib. When I compile the project all the javascript classes are generated inside.</p>
  <p>The problem is that inside each component folder there are 2 typescript files and one scss file. The two TS files generate fine but the scss file not.</p>
  <p>package.json</p>
  <pre><code>  &quot;name&quot;: &quot;my-library&quot;,
    &quot;version&quot;: &quot;0.0.14&quot;,
    &quot;main&quot;: &quot;lib/index.js&quot;,
    &quot;module&quot;: &quot;lib/index.js&quot;,
    &quot;files&quot;: [
      &quot;lib&quot;,
      &quot;README.nmd&quot;
    ],
  ...
  &quot;scripts&quot;: {
      &quot;build&quot;: &quot;tsc &amp;&amp; yarn copy-files&quot;,
      &quot;test&quot;: &quot;react-scripts test&quot;,
      &quot;coverage&quot;: &quot;npm test -- --coverage&quot;,
      &quot;storybook&quot;: &quot;start-storybook -p 6006&quot;,
      &quot;build-storybook&quot;: &quot;build-storybook -o build&quot;,
      &quot;copy-files&quot;: &quot;cp ./package.json ./lib/package.json&quot;
    },
  </code></pre>
  <p>tsconfig.json</p>
  <pre><code>{
    &quot;compilerOptions&quot;: {
      &quot;rootDir&quot;: &quot;./src&quot;,
      &quot;target&quot;: &quot;es5&quot;,
      &quot;forceConsistentCasingInFileNames&quot;: false,
      &quot;allowSyntheticDefaultImports&quot;: true,
      &quot;module&quot;: &quot;ES6&quot;,
      &quot;allowJs&quot;: true,
      &quot;sourceMap&quot;: true,
      &quot;keyofStringsOnly&quot;: true,
      &quot;jsx&quot;: &quot;react&quot;,
      &quot;experimentalDecorators&quot;: true,
      &quot;skipLibCheck&quot;: true,
      &quot;types&quot;: [
        &quot;node&quot;
      ],
      &quot;lib&quot;: [
        &quot;dom&quot;,
        &quot;dom.iterable&quot;,
        &quot;esnext&quot;
      ],
      &quot;outDir&quot;: &quot;./lib/&quot;,
      &quot;declaration&quot;: true,
      &quot;noImplicitAny&quot;: true,
      &quot;moduleResolution&quot;: &quot;node&quot;,
      &quot;resolveJsonModule&quot;: true
    },
    &quot;include&quot;: [
      &quot;src/&quot;
    ],
    &quot;exclude&quot;: [
      &quot;node_modules&quot;
    ]
  }
  </code></pre>
  <p>webpack.config.js</p>
  <pre><code>const path = require('path');
  
  module.exports = {
    entry: './src/index.ts',
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          use: 'ts-loader',
          exclude: /node_modules/
        },
        {
          test: /\.s[ac]ss$/i,
          use: ['style-loader', 'css-loader', 'sass-loader'],
        }
      ],
    },
    resolve: {
      extensions: ['.tsx', '.ts', '.js'],
    },
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'lib'),
    }
  };
  </code></pre>
  <p>I would really appreciate some help... I don't know what I have to modify to make it work...</p>
  <p>Regards</p>