编辑:从 Next.js 7 开始,仅需在 next.config.js 中注册 withCSS 插件即可支持导入 .css 文件。首先安装插件:
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上的文档。
Next.js <版本7
默认情况下,Next.js不提供CSS导入功能。您需要使用webpack加载器。请参阅此处的工作原理: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。该插件的文档使其相当简单:
- 在
pages/
中创建_document
文件。
- 在根目录中创建
next.config.js
文件。
使用文档中的代码片段应该能够让您导入CSS文件。
您需要至少5.0版本。您可以确保安装了最新的Next.js:npm i next@latest
。
import
css文件,该布局本身是从我的pages/_app.tsx
导入的,这样它就会自动包含在每个页面中。关于Popper和TransitionGroup库,我仍然不知道该怎么做,文档有点糟糕。 - Vadorequestnext.config.js
文件中,{/* my next config */}
是你编写配置选项的地方。 - mtl