如何使用 webpack 和 typescript 将 npm 模块 css 作为全局导入？

问题描述

我使用的是 react-tabs，它与 .css 文件捆绑在一起。它建议导入 css 文件，如：

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

我遵循基本示例，并将 Tab 组件呈现为：

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

不幸的是，当我在这个组件上使用导入语法时，没有应用样式。没有错误。它只是呈现没有样式的选项卡。

我有 webpack 设置来加载 css：

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

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;

我不确定为什么这个导入不起作用。我看过的所有其他问题和文档都让这看起来相当简单。

我应该补充一点，我还在整个项目中使用 CSS 模块，例如：

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

这些工作成功

解决方法

好的，我必须为全局表和 css 模块创建单独的规则

我最终得到：

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