从 Next JS 中的节点模块导入 css 文件? [英] Import css files from node modules in Next JS?

问题描述

我对 next.js 很陌生.将它用于我的应用程序的服务器端渲染.

I am very new to next.js. Using it for the server side rendering of my application.

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

According to the documentation you can import css files from a static folder which should be in root directory but i want to import css from node_modules because i have extended bootstrap and created my own package.

推荐答案

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

This is the solution you are probably looking for:

三个简单的步骤:

1. 安装 next-css 插件:

npm install --save @zeit/next-css

1. 在你的根目录下创建 next.config.js，内容如下:

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

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

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

Other solutions are workarounds from before next-css was available, but as shown above, there is a simple and supported solution now. It was provided by one of the core team members: https://spectrum.chat/next-js/general/ignoring-folders-files-specifically-fonts~4f68cfd5-d576-46b8-adc8-86e9d7ea0b1f

这篇关于从 Next JS 中的节点模块导入 css 文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！