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

It may well be a consequence of configuring your CSS loader to use CSS modules. — Aluan Haddad, Feb 17 '21 at 08:03
I do use CSS modules in other places. So maybe I'd need a rule for global vs module imports? — kevzettler, Feb 17 '21 at 15:41
Ok, yes. If I remove the `options: { modules: true}` from the `css-loader` it will correctly import the global `react-tabs.css`. But then all other css module imports are broken. How do I configure a rule to handle both cases? — kevzettler, Feb 17 '21 at 15:50
You can achieve this by using the [include](https://webpack.js.org/configuration/module/#ruleinclude) and [exclude](https://webpack.js.org/configuration/module/#ruleexclude) properties of your rules. In other words, create multiple CSS rules which will apply where appropriate. — Aluan Haddad, Feb 17 '21 at 15:57

score 0 · Answer 1 · answered Feb 18 '21 at 03:56

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 }
          }
        ]
      },

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

1 Answers1