在 React 开发中，CSS 样式表是必不可少的一部分。而在使用 Next.js 进行 React SSR 开发时，使用 CSS Modules 可以更好地维护样式，以及避免 CSS 样式冲突的问题。然而，使用 CSS Modules 时也会遇到一些坑点，本文将介绍 Next.js 中使用 CSS Modules 的坑点及解决方案。
什么是 CSS Modules？
CSS Modules 是一种模块化的 CSS 方案，它可以将每个 CSS 文件都视为独立的模块，并且在打包时自动为每个模块生成唯一的类名，避免样式冲突问题。同时，CSS Modules 可以通过编写 JS 代码来引用 CSS 样式，实现更加灵活的 CSS 样式控制。
下面是一个简单的 CSS Modules 样式文件例子：
// title.module.css
.title {
font-size: 24px;
color: red;
}在组件中引用该样式文件：
// Title.js
import styles from './title.module.css'
function Title() {
return <h1 className={styles.title}>Hello World</h1>
}Next.js 中的 CSS Modules
在使用 Next.js 开发 React SSR 时，可以通过在项目根目录下创建 next.config.js 配置文件，启用 css-loader 来支持 CSS Modules 样式文件的使用。具体配置如下：
-- -------------------- ---- -------
-- --------------
-------------- - -
-------- -------- - -------- -- -- -
--------------------------
----- ----------
---- -
-
------- -------------
-------- -
-------- -
----- -----
--------------- -------- - --------- - ------------------
--
--
-
--
-------- ----------------
--
-- ----------- -
----------- - -
--- -------
-
-
------ ------
-
-配置完成后，在 Next.js 项目中就可以使用 CSS Modules 了。
// Title.js
import styles from './title.module.css'
function Title() {
return <h1 className={styles.title}>Hello World</h1>
}坑点及解决方案
CSS Modules 不识别 @import
在 CSS Modules 中，@import 语句不再生效，因为 CSS Modules 使用了计算属性的方式来生成唯一的类名，@import 语句可能会影响计算过程，从而导致样式丢失。
解决方案：使用 @import 语句时，应该在后缀名前面添加样式文件的相对路径，显示地引入需要的样式文件。
-- -------------------- ---- ------- -- ---------------- ------- -------------------- ------ - ---------- ----- ------ ---- - -- --------------- ----- - ------- -- -------- -- -
CSS Modules 在样式组合时需要空格隔开
在 CSS 中，类选择器可以使用空格隔开来组合样式，但在使用 CSS Modules 时，组合样式不可以使用空格隔开，否则会生成不同的类名。
解决方案：在组合样式时使用 CamelCase 的格式，使用:来连接不同的选择器。如下例：
-- -------------------- ---- -------
-- ----------------
---------- -
---------- -----
-
--------------- -
-------------- --- ----- -----
-
-- --- ---- --
-- ------ ---------- -
-- ---------- -----
-- ------ ----
-- -
-- ------ --------------- -
-- -------------- --- ----- -----
-- -
-- ---- --
--------------- -
---------- -----
------ ----
-
-------------------- -
-------------- --- ----- -----
-
-- --------
------ ------ ---- ---------------------
-------- ------- -
------ -
---- -------------------------
--- ------------------------------- -------------------------------- ----------
------
-
-外部引用的 CSS 样式不与 CSS Modules 样式生效
在 React SSR 项目中，可能需要引入一些全局的 CSS 样式文件，如 Normalize.css 或其他第三方 CSS 库。然而，这些 CSS 样式文件不会与 CSS Modules 样式文件生效，导致全局样式应用不一致的问题。
解决方案：在 Next.js 项目中，可以使用 @zeit/next-css 模块和 @zeit/next-sass 模块来支持全局 CSS 样式文件的引入。具体做法如下：
- 安装
@zeit/next-css和@zeit/next-sass模块：
npm install @zeit/next-css @zeit/next-sass --save-dev
- 在
next.config.js中引入@zeit/next-css模块并配置：
// next.config.js
const withCSS = require('@zeit/next-css')
const withSass = require('@zeit/next-sass')
module.exports = withCSS(withSass({
// other configs
}))- 在
pages/_app.js中使用import引入需要的全局 CSS 或 SASS 样式文件：
// pages/_app.js
import '../styles/global.css';
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}
export default MyApp;这样就可以使用全局 CSS 或 SASS 样式了，并且不会与 CSS Modules 样式冲突。
总结
使用 CSS Modules 是开发 React SSR 应用时的一个好习惯，它能够帮助我们更好地管理样式，并且避免 CSS 样式冲突的问题。在使用 CSS Modules 时，我们需要注意避免 @import，使用驼峰式样式选择器，以及支持全局样式引入等问题。以上是本文关于 Next.js 中使用 CSS Modules 的坑点及解决方案的分享，希望能够帮助到你。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e08584f6b2d6eab3b9daaf