我正在使用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';
这些工作成功