在 Next.js 中，styled-jsx 是一种非常流行的 CSS-in-JS 解决方案，它允许你在组件内定义 CSS 样式，并且可以自动处理样式的作用域问题。但是，在实际开发中，我们通常需要加载外部 CSS 样式文件，本文将介绍如何在 Next.js 中使用 styled-jsx 加载外部样式。
styled-jsx 的基本用法
在 Next.js 中使用 styled-jsx 非常简单，只需要在组件内部使用 <style jsx> 标签即可，例如：
-- -------------------- ---- -------
------ ----- ---- -------
----- ------ - -- -- -
------- -------------------
----- --
------ ------
------- -
----------------- --------
------ -----
------- -----
-------------- ----
-------- --- -----
---------- -----
------- --------
-
----------
---------
-
------ ------- ------在上面的例子中，我们在 <style jsx> 标签内部定义了一个 .button 类，它被应用到了 <button> 元素上。styled-jsx 会自动处理样式的作用域问题，确保样式只作用于当前组件内部。
加载外部样式
如果我们希望使用外部样式文件，我们可以使用 @import 关键字来引入外部样式文件。例如：
-- -------------------- ---- -------
------ ----- ---- -------
----- ------ - -- -- -
------- -------------------
----- --
------ ------
------- ---------------------------------------------------------------------------------
------- -
----------------- --------
------ -----
------- -----
-------------- ----
-------- --- -----
---------- -----
------- --------
------------ --------- -----------
-
----------
---------
-
------ ------- ------在上面的例子中，我们使用 @import 关键字引入了来自 Google Fonts 的 Roboto 字体。注意，我们仍然需要将样式定义在 <style jsx> 标签内部，否则 styled-jsx 无法处理样式的作用域问题。
使用外部样式文件
如果我们希望在 Next.js 中使用外部样式文件，我们可以使用 styled-jsx-plugin-sass 插件来支持 Sass 或者 Scss 文件。首先，我们需要安装插件：
npm install --save-dev styled-jsx-plugin-sass
然后，我们需要在 next.config.js 文件中配置插件：
const withSass = require('styled-jsx-plugin-sass')
module.exports = withSass({
webpack(config, options) {
return config
},
})现在，我们可以在组件内部使用 @import 关键字引入外部 Sass 或者 Scss 文件了。例如：
-- -------------------- ---- -------
------ ----- ---- -------
----- ------ - -- -- -
------- -------------------
----- --
------ ------
------- ----------------
------- -
----------------- --------
------ -----
------- -----
-------------- ----
-------- --- -----
---------- -----
------- --------
-
----------
---------
-
------ ------- ------在上面的例子中，我们使用 @import 关键字引入了 button.scss 文件，它定义了 .button 类的样式。注意，我们需要将文件路径包含在引号内部，并且不需要添加文件扩展名。
总结
在 Next.js 中使用 styled-jsx 加载外部样式非常简单，我们可以使用 @import 关键字引入外部样式文件，也可以使用 styled-jsx-plugin-sass 插件来支持 Sass 或者 Scss 文件。通过使用 styled-jsx，我们可以更加方便地管理组件的样式，并且可以自动处理样式的作用域问题，避免样式冲突的问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/657c9474d2f5e1655d766e45