解决 Next.js 中 CSS 预处理器失效的问题-JavaScript中文网-JavaScript教程资源分享门户

在使用 Next.js 进行开发时，有时会遇到使用 CSS 预处理器（如 Sass、Less）时失效的情况。这是因为 Next.js 在构建项目时使用的是服务器端渲染（SSR）模式，在这种模式下，在组件渲染时无法访问客户端的环境变量。

接下来将介绍一种解决方法，以实现在 Next.js 中使用 CSS 预处理器的效果。

安装依赖项

首先，需要安装 @zeit/next-sass 和 node-sass（如果使用 Sass）。可以使用以下命令进行安装：

npm install --save-dev @zeit/next-sass node-sass

安装完成后，需要在 next.config.js 文件中添加以下代码：

const withSass = require("@zeit/next-sass");
module.exports = withSass({
  cssModules: true,
  cssLoaderOptions: {
    importLoaders: 1,
    localIdentName: "[local]___[hash:base64:5]",
  },
});

上述代码使用 next-sass 来启用 Sass 和 CSS 模块化，并配置了本地 CSS 类名的命名规则。

引入 CSS 文件

接下来，需要在组件中引入 CSS 或 Sass 文件，并将其包含在 className 属性中。例如，在 index.js 组件中添加以下代码：

// javascriptcn.com 代码示例
import styles from "./index.module.scss";
const Index = () => {
  return (
    <div className={styles.container}>
      <h1 className={styles.title}>Hello, World!</h1>
    </div>
  );
};
export default Index;

在上述代码中，使用 import 来导入 CSS 或 Sass 文件，然后使用 className 属性来设置样式。

创建 CSS 或 Sass 文件

最后，我们需要创建一个 CSS 或 Sass 文件，并定义相关的样式规则。例如，可以在 index.module.scss 文件中添加以下代码：

// javascriptcn.com 代码示例
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f5f5f5;
}
.title {
  font-size: 60px;
  font-weight: bold;
  color: #333;
}

上述代码定义了容器和标题的样式，以及背景颜色和字体颜色的属性。这些样式属性将在组件中的 className 属性中引用。

总结

通过使用 @zeit/next-sass 包和 node-sass 库，我们可以在 Next.js 中使用 CSS 预处理器。使用本文中提供的方法，你可以在 Next.js 项目中使用 Sass 或 Less 等预处理器，还可以更方便地添加和管理样式。希望这篇文章对你有帮助，祝你编写出更好的 Next.js 项目！

示例代码：

./pages/index.js：

// javascriptcn.com 代码示例
import styles from "./index.module.scss";
const Index = () => {
  return (
    <div className={styles.container}>
      <h1 className={styles.title}>Hello, World!</h1>
    </div>
  );
};
export default Index;

./pages/index.module.scss：

// javascriptcn.com 代码示例
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f5f5f5;
}
.title {
  font-size: 60px;
  font-weight: bold;
  color: #333;
}

./next.config.js:

const withSass = require("@zeit/next-sass");
module.exports = withSass({
  cssModules: true,
  cssLoaderOptions: {
    importLoaders: 1,
    localIdentName: "[local]___[hash:base64:5]",
  },
});

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6538d1977d4982a6eb1eb366