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

Posted 2023-03-07

【中文标题】从 Next JS 中的节点模块导入 css 文件？

【英文标题】：Import css files from node modules in Next JS?

【发布时间】：2017-12-24 19:34:17

【问题描述】：

我对@9​​87654321@ 很陌生。将它用于我的应用程序的服务器端渲染。

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

【参考方案1】：

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

三个简单的步骤：

安装 next-css 插件：

npm install --save @zeit/next-css

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

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

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

现在您应该可以像这样从 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

【讨论】：

这是正确答案。不幸的是，我在投反对票 10 分钟后才意识到这一点，而且 SO 有一条荒谬的规则阻止我改变投票，除非它被编辑。

我没有看到编辑，很遗憾我仍然无法更改我的投票。如果你的不被接受，我也提出了修改建议。

【参考方案2】：

使用@webdeb/next-styles 代替@zeit/next-css 即可正常导入任何节点模块样式。

    const withStyles = require('@webdeb/next-styles')

    module.exports = withStyles(
      sass: true, // use .scss files
      modules: true, 
    )

【参考方案3】：

更新：如果您在将普通 css 导入组件时遇到任何问题，请遵循 this 示例。

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

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

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

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

【讨论】：

不可以这样导入，需要看下一个js文档。

看看这个问题github.com/zeit/next.js/issues/299#issuecomment-316400292

我以为你导入css文件没有问题。现在只需使用 wrap-in-js babel 插件并在导入 css 文件后将它们注入到您的 jsx 中，如下所示：<style dangerouslySetInnerhtml=__html: importedcssfile/>

@dev123 您也可以按照此示例进行操作，它解释了设置我告诉您的内容所需的任何内容：example with global styles

【参考方案4】：

从 Next.js 9.2 开始，不再需要使用 next-css 和 withCSS 或 withStyle。 Next.js 原生处理 CSS 导入。 由于这些可能伴随 Webpack 问题（请参阅此问题：Having trouble importing CSS in NextJs），这是使用 webpack 配置加载程序的方法。在您的终端中：

npm install file-loader --save-dev

npm install url-loader --save-dev

然后用以下内容替换（或完成）您的 next.config.js 文件：

module.exports = 
    cssModules: true,
    webpack: (config, options) => 
        config.node = 
            fs: "empty",
        ;
        config.module.rules.push(
            use: [
                options.defaultLoaders.babel,
                
                    loader: "url-loader?limit=100000",
                ,
                
                    loader: "file-loader",
                ,
            ],
        );
        return config;
    ,
;

不要忘记删除任何提及withCSS、withStyle 或next-css，因为它们可能会导致一些错误发生。

【参考方案5】：

从 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。一切顺利。