从Next JS中的节点模块导入CSS文件？

Question

我是新来的next.js。使用它进行我的应用程序的服务器端渲染。

根据文档，您可以从应该位于根目录中的静态文件夹中导入css文件，但是我想从node_modules中导入css，因为我已经扩展了引导程序并创建了自己的包。

Answer 1

这是您可能正在寻找的解决方案：

3个简单步骤：

1. 安装next-css插件：

npm install --save @zeit/next-css

2. 在根目录中创建next.config.js，其内容如下：

// next.config.js 
const withCSS = require('@zeit/next-css')

module.exports = withCSS({
  cssLoaderOptions: {
    url: false
  }
})

3. 现在，您应该能够像这样从node_modules导入样式表：

import 'bootstrap-css-only/css/bootstrap.min.css';

注意：使用Next v 8+

其他解决方案是使用next-css之前的解决方法，但是如上所述，现在有一个简单且受支持的解决方案。它是由核心团队成员之一提供的：https：//spectrum.chat/next-js/general/ignoring-folders-files-specifically-fonts~4f68cfd5-d576-46b8-adc8-86e9d7ea0b1f

Answer 2

从 Nextjs 9.5.4 开始，您现在可以将 css 文件直接从 node_modules 导入到您需要的组件中（不需要位于 _app.js 中）。像这样

import DatePicker from 'react-datepicker'
import 'react-datepicker/dist/react-datepicker.css'

请参阅此处的文档以获取更多信息 - https://nextjs.org/docs/basic-features/built-in-css-support。一切顺利。

Answer 3

更新：如果您在将普通 css 导入组件时遇到任何问题，请按照此示例操作。

除此之外没有什么区别。如果您从静态文件夹导入，则地址类似于：

import stylesheet from '../static/css/index.css'

现在如果你想从节点模块（例如 rc-slider 包）导入 css，它将是：

import rcstyle from 'rc-slider/assets/index.css';