Use with CRA without ejecting? about css-modules-typescript-loader HOT 2 CLOSED

Sorry, no way we can support this from our side. The issue is with CRA.

from css-modules-typescript-loader.

Use craco? Follow the directions at craco to set it up for use with your project. Then all you need to do is add the following in the craco.config.js file:

const { addAfterLoader, loaderByName, throwUnexpectedConfigError } = require('@craco/craco');

const throwError = message =>
  throwUnexpectedConfigError({
    packageName: 'craco',
    githubRepo: 'gsoft-inc/craco',
    message,
    githubIssueQuery: 'webpack'
  });

module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      console.log('Adding css-modules-typescript-loader...');
      const cssModulesTypeScriptLoader = {
        loader: require.resolve('css-modules-typescript-loader')
      };
      const { isAdded } = addAfterLoader(webpackConfig, loaderByName('css-loader'), cssModulesTypeScriptLoader);
      if (!isAdded) {
          throwError('Failed to add the css-modules-typescript-loader!')
      }

      return webpackConfig;
    }
  }
};

The only issue I'm currently running into is that I'm using a mono-repo with Yarn and PnP and this module seems to be trying to overwrite *.css.d.ts files in the PnP cache, which are really Zip files and so are read-only, causing an error. I'm trying to understand if there's a way to have this loader exclude those files or restrict what it attempts to create a typings file for.

In my project, I'm using Semantic UI React, and in the main App.tsx file, I'm using import 'semantic-ui-css/semantic.min.css'. This CSS file is offered as a npm library. And because it's imported, this webpack loader is attempting to create a typings flise for it. I really don't want it to.

First, I'm not doing something like import semanticUIStyles from 'semantic-ui-css/semantic.min.css', where then I could use semanticUIStyles in my react components to access discrete style classes. I'm simply importing the CSS file so that CSS styles are applied to the elements.

from css-modules-typescript-loader.