我很陌生next.js
。将它用于我的应用程序的服务器端渲染。
根据文档,您可以从应该位于根目录的静态文件夹中导入 css 文件,但我想从 node_modules 导入 css,因为我已经扩展了引导程序并创建了自己的包。
我很陌生next.js
。将它用于我的应用程序的服务器端渲染。
根据文档,您可以从应该位于根目录的静态文件夹中导入 css 文件,但我想从 node_modules 导入 css,因为我已经扩展了引导程序并创建了自己的包。
这是您可能正在寻找的解决方案:
3个简单的步骤:
npm install --save @zeit/next-css
// next.config.js
const withCSS = require('@zeit/next-css')
module.exports = withCSS({
cssLoaderOptions: {
url: false
}
})
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
使用@webdeb/next-styles 而不是@zeit/next-css。然后您可以正常导入任何节点模块样式。
const withStyles = require('@webdeb/next-styles')
module.exports = withStyles({
sass: true, // use .scss files
modules: true,
})
从 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。一切顺利。
更新:如果您在将普通 css 导入组件时遇到任何问题,请按照此示例进行操作。
除此之外没有区别。如果您从静态文件夹导入,地址类似于:
import stylesheet from '../static/css/index.css'
现在,如果您想从节点模块(例如 rc-slider 包)导入 css,它将是:
import rcstyle from 'rc-slider/assets/index.css';
从 Next.js 9.2 开始,不再需要使用next-css
and withCSS
or withStyle
。Next.js 原生处理 CSS 导入。由于这些可能伴随 Webpack 问题(请参阅此问题:在 NextJs 中导入 CSS 时遇到问题),这是使用 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
因为它们可能会导致一些错误发生。