编辑:从 Next.js 7 开始,要支持导入 .css 文件,您所要做的就是注册withCSS https://github.com/zeit/next-plugins/tree/master/packages/next-css插件在你的 next.config.js 中。首先安装插件:
npm install --save @zeit/next-css
然后创建next.config.js
文件放在项目根目录中,并向其中添加以下内容:
// next.config.js
const withCSS = require('@zeit/next-css')
module.exports = withCSS({/* my next config */})
您可以通过创建一个简单的页面并导入一些 CSS 来测试这是否有效。首先创建一个 CSS 文件:
// ./index.css
div {
color: tomato;
}
然后创建pages
文件夹与index.js
文件。然后你可以在你的组件中做这样的事情:
// ./pages/index.js
import "../index.css"
export default () => <div>Welcome to next.js 7!</div>
您还可以通过几行配置来使用 CSS 模块。有关这方面的更多信息,请查看有关的文档nextjs.org/docs/#css https://nextjs.org/docs/#css.
Next.js
默认情况下,Next.js 不附带 CSS 导入。您必须使用 webpack 加载器。您可以在此处了解其工作原理:https://zeit.co/blog/next5#css,-less,-sass,-scss-and-css-modules https://zeit.co/blog/next5#css,-less,-sass,-scss-and-css-modules.
Next.js 还具有 CSS、SASS 和 SCSS 插件。这是 CSS 的插件:https://github.com/zeit/next-plugins/tree/master/packages/next-css https://github.com/zeit/next-plugins/tree/master/packages/next-css。该插件的文档使其相当简单:
- 您创建了
_document
文件输入pages/
.
- 您创建了
next.config.js
根目录下的文件。
使用文档中的代码片段应该可以让您导入 CSS 文件。
您至少需要 5.0 版本。您可以确保安装了最新的 Next.js:npm i next@latest
.