在 Next.js 中，全局样式的处理方式与传统的 React 开发有所不同。本文将介绍 Next.js 中处理全局样式的方法，包括在 pages/_app.js 挂载全局样式、使用 CSS Modules 和 Sass。
在 _app.js 中挂载全局样式
在 Next.js 中，我们可以使用 _app.js 文件来覆盖 App 组件，并使用 Styled-jsx 提供的 <style> 组件来设置全局样式。例如：
-- -------------------- ---- -------
------ --- ---- ----------
------ ------- ----- ----- ------- --- -
-------- -
----- - ---------- --------- - - ----------
------ -
--
------ --- ---------
---- -
------- --
------------ -------- -----------
-
----------
---------- -------------- --
---
-
-
-在这个例子中，我们在 _app.js 中使用了 Styled-jsx 提供的 <style> 组件，并设置了全局样式。这个样式将会应用在所有页面上。
使用 CSS Modules
Next.js 还支持使用 CSS Modules 来处理全局样式。CSS Modules 可以帮助我们避免样式冲突和样式覆盖的问题，同时还可以方便地进行组件样式的复用。下面是一个使用 CSS Modules 的例子：
- 在
styles/global.css中定义全局样式：
body {
margin: 0;
font-family: 'Arial', sans-serif;
}- 在
_app.js中使用import引入该文件：
-- -------------------- ---- -------
------ --- ---- ----------
------ ----------------------
------ ------- ----- ----- ------- --- -
-------- -
----- - ---------- --------- - - ----------
------ -
--
---------- -------------- --
---
-
-
-- 在页面中使用 CSS Modules：
-- -------------------- ---- -------
------ ------ ---- ---------------------------
------ ------- -------- ------ -
------ -
---- -----------------------------
---- ---------------------------- ------------
------
-
-在这个例子中，我们在 _app.js 中使用 import 引入了全局样式文件，并在首页中使用了 CSS Modules。通过 CSS Modules，我们可以方便地设置样式，并且避免了样式冲突和样式覆盖的问题。
使用 Sass
除了上述两种方式，我们还可以使用 Sass 来处理全局样式。在 Next.js 中，我们可以通过引入 sass 和 sass-loader 来实现这个功能。
- 安装
sass和sass-loader：
npm install sass sass-loader --save-dev
- 创建
styles/global.scss文件并定义样式：
-- -------------------- ---- ------- --------------- -------- ---- - ------- -- ------------ -------- ----------- - ------ - ----------------- --------------- ------ ------ -
- 在
_app.js中引入该文件：
-- -------------------- ---- -------
------ --- ---- ----------
------ -----------------------
------ ------- ----- ----- ------- --- -
-------- -
----- - ---------- --------- - - ----------
------ -
--
---------- -------------- --
---
-
-
-在这个例子中，我们使用 Sass 来定义全局样式，并在 _app.js 中引入。使用 Sass 可以帮助我们更方便地组织样式代码，以及使用变量、嵌套和混合等功能。
总结
在 Next.js 中处理全局样式有多种方式，包括在 _app.js 中挂载全局样式、使用 CSS Modules 和使用 Sass。根据不同的需求，我们可以选择适合自己的方式，来处理全局样式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b2258948841e9894e71fae