如何在nextjs中使用scss而不使用css模块

Question

我可以配置 webpack 以允许包含 scss。

注意：在静态 html 和 React 组件之间复制代码时，在原始 html 上使用 classNames 会更快，这就是我想这样做的原因。

如何在没有 css 模块和样式组件而仅使用基本的 scss 和类名的情况下在 nextjs 中实现此功能？

import 'styles/MyComponent.scss';

const MyComponent = () => {
  return (
    <div className="someClass">
      stuff..
    </div>
  );
};

export default MyComponent;

Answer 1

1. 安装 sass

npm install --save-dev sass

2. 在 Next.js 中禁用 css-modules 组件样式

在 中next.config.js，添加以下配置：

/** @type {import('next').NextConfig} */
const path = require('path');
const nextConfig = {
  // disable css-modules component styling
  webpack(config) {
    config.module.rules.forEach((rule) => {
      const { oneOf } = rule;
      if (oneOf) {
        oneOf.forEach((one) => {
          if (!`${one.issuer?.and}`.includes('_app')) return;
          one.issuer.and = [path.resolve(__dirname)];
        });
      }
    })
    return config;
  },
}

module.exports = nextConfig

在next.js版本中验证：v12.3~v13.x

请参阅示例：next.js 应用程序中没有 CSS 模块：（json5 应用程序）

Answer 2

您可以使用 @zeit/next-sass 插件提供的 withSass() 函数来做到这一点，但它现在已被弃用。

https://www.npmjs.com/package/@zeit/next-sass