How to import npm module css as global with webpack and typescript?

Question

I am using react-tabs it comes bundled with a .css file. It suggests importing the css file like:

import 'react-tabs/style/react-tabs.css';

I'm following the basic example and have the Tab components rendered like:

          <Tabs>
            <TabList>
              <Tab>Head</Tab>
            </TabList>
            <TabPanel>....</TabPanel>
          </Tabs>

Unfortunately, when I use the import syntax on this component the styles are not applied. Theres no errors. It just renders the tabs without styles.

I have webpack setup to load css with:

      {
        test: /\.css$/i,
        use: [
          "style-loader",
          "@teamsupercell/typings-for-css-modules-loader",
          {
            loader: "css-loader",
            options: { modules: true }
          }
        ]
      }

There appears to be a typescript declaration file in the react-tabs/module/

declare namespace ReactTabsCssNamespace {
  export interface IReactTabsCss {
    "react-tabs": string;
    "react-tabs__tab": string;
    "react-tabs__tab--disabled": string;
    "react-tabs__tab--selected": string;
    "react-tabs__tab-list": string;
    "react-tabs__tab-panel": string;
    "react-tabs__tab-panel--selected": string;
  }
}

declare const ReactTabsCssModule: ReactTabsCssNamespace.IReactTabsCss & {
  /** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
  locals: ReactTabsCssNamespace.IReactTabsCss;
};

export = ReactTabsCssModule;

I'm not sure why this import is not working. All the other questions and docs I've seen make this seem fairly straightforward.

I should add that I also use CSS modules throughout the project like:

import styles from '../styles/Equip.css';

These work successfully

Answer 1

Ok I had to create seperate rules for the global sheet and the css modules

I ended up with:

      {
        test: /react\-tabs\.css$/i,
        use: [
          "style-loader",
          {
            loader: "css-loader",
          }
        ]
      },

      {
        test: /\.css$/i,
        exclude: /node_modules/,
        use: [
          "style-loader",
          "@teamsupercell/typings-for-css-modules-loader",
          {
            loader: "css-loader",
            options: { modules: true }
          }
        ]
      },