时间戳

首页 > 解决方案 > 如何使用 webpack 和 typescript 将 npm 模块 css 导入为全局？

reactjs - 如何使用 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';

这些工作成功

标签： reactjstypescriptwebpackreact-tabs

解决方案

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

我最终得到：

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

推荐阅读