如何解决如何从Next.js中的CSS模块导入样式表?
我正在尝试将React Grid Layout集成到我的Next.js应用程序中。他们说,作为安装过程的一部分,在我的应用程序中包括以下样式表:
/node_modules/react-grid-layout/css/styles.css
/node_modules/react-resizable/css/styles.css
我该怎么做?
解决方法
我自己没有使用过该库,但是通常要导入css,您只需将文件导入到要使用它的模块的顶部即可,然后您无需对其进行任何其他操作。
假设您的App
文件位于src
的正下方,如果您是我,请尝试通过以下方式将这些文件导入App
的顶部:
import '../node_modules/react-grid-layout/css/styles.css'
import '../node_modules/react-resizable/css/styles.css'
,
嗯,实际上它们不是CSS模块,而是常见的CSS文件,因此您可以使用ECMAscript模块将它们导入到根文件(App.js或index.js)中,如下所示:
import '../node_modules/react-grid-layout/css/styles.css';
import '../node_modules/react-resizable/css/styles.css';
,
虽然@SMAKSS的答案是正确的,但我想指出的是Next.js会有一个新更新,以支持从第3方库中导入CSS。提交此信息时,它仍在canary分支上。
示例
// components/MySlider.tsx
import { Slider } from "@reach/slider";
import "@reach/slider/styles.css";
function Example() {
return <Slider min={0} max={200} step={10} />;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。