如何在 nextjs 中使用没有 css 模块的 scss

Posted 2023-02-22

【中文标题】如何在 nextjs 中使用没有 css 模块的 scss

【英文标题】：How to use scss without css modules in nextjs

【发布时间】：2021-10-06 15:38:25

【问题描述】：

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

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

如何在 nextjs 不使用 css 模块和样式化组件和只使用基本的 scss 和类名来实现这项工作？

import 'styles/MyComponent.scss';

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

export default MyComponent;

【问题讨论】：

在_app 中导入该样式表？参考：Adding a Global Stylesheet，或者可以这样做：***.com/a/68531573，或者这样：***.com/a/68045052

【参考方案1】：

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

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

【讨论】：

谢谢，但如果不推荐使用它是不好的，除非我降级，这是不理想的。 Webpack 仍然是这里更好的选择