如何在Next.js中使用SCSS而不使用CSS模块化

Question

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

注意：在将代码从静态html复制到React组件时，使用原始html上的classNames更快，这就是我希望以这种方式完成的原因。

如何在nextjs中不使用css模块和styled components，只使用基本的scss和classNames使其工作？

import 'styles/MyComponent.scss';

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

export default MyComponent;

- Steve Tomlin

---

将样式表导入到 _app 中？参考：添加全局样式表，或者可以像这样做：https://dev59.com/BsHqa4cB1Zd3GeqP2I0t#68531573，或者这样做：https://stackoverflow.com/a/68045052。 - brc-dd

在 Next.js 中，您也可以禁用 CSS 模块。请参考此链接：https://cwtuan.blogspot.com/2022/10/disable-css-module-in-nextjs-v1231-sept.html - cwtuan

Answer 1

安装Sass

npm install --save-dev sass

在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 app)

- cwtuan

---

不解释如何使用scss，但这是一个有趣的想法，可以扩展/覆盖nextjs webpack配置。也许我可以添加一个额外的处理程序来导入scss。 - Steve Tomlin

@SteveTomlin 我已经更新了如何在 Next.js 中使用 SCSS。 - cwtuan

你是我的英雄。 - Or Assayag

Answer 2

你可以使用@zeit/next-sass插件提供的withSass()函数来实现，但该函数现已被弃用。

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

- bellam

---

谢谢，但如果它已被弃用，除非我降级，否则没有用，这并不理想。在这里，Webpack仍然是更好的选择。 - Steve Tomlin