nextjs不使用css model,直接用.parentclass{ .class{} }方式？

Question

**大佬们都采用的是CSS Model方案吗？或者在pages/_app.js 引入一堆？
感觉应该是支持向create- react-app引入sass的，我再找找资料看看，感觉是少了配置**

大佬们最近刚由 create- react-app 转 NnextJS。觉得用css CSS Mmodel 每次都加一个 ${style.XXX} 太麻烦了，之前用的 .parentclass { .class{ } } 标签嵌套也能解决样式污染，于是就这样做了。

神奇的是在 Mac 上面能正常运行，我在家里面的 Windows 电脑直接报错让用 CSS Model

想问下大佬们这种 CSS 引用方式正确吗？🐡🐡🐡

我把代码拉到新目录执行 yarn 就报错，但是我不想用 CSS Model。

大佬们看看，他就是这样跑起来了。但是新创目录拉下来就跑不起来。因为能这样跑起来我心想这样写应该是可行的，只是我不知道配置。按照官方要求使用css Model或者APP下引用确实就没问题了，初生牛犊想折腾折腾👀
❯ npm list
next-home@0.1.0
├── antd@5.6.4
├── autoprefixer@10.4.14
├── eslint-config-next@13.4.9
├── eslint@8.44.0
├── lodash.isempty@4.4.0
├── next@13.4.9
├── postcss@8.4.25
├── react-dom@18.2.0
├── react-reveal@1.2.2
├── react@18.2.0
├── sass@1.63.6
├── store@2.0.12
└── tailwindcss@3.3.2

Answer 1

报错信息里面说明了解决方案了呀。
移动到 pages/_app.js 中来引入你的 HomePage.scss 就好了

import '../styles.css'
 
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

相关链接

Global CSS Must Be in Your Custom <App> | Next.js

---

看来你的问题是，你想在组件层级直接 import 'componentStyle.scss' 文件来映入样式。但是 NextJs 并不允许你这样做。
因为直接 import 'componentStyle.scss' 会被认为是全局样式。所以你可以考虑在 app.js 里面引入 style.scss，然后在 style.scss 中 @import 'componentStyle.scss' 这样来处理。

其实写习惯了也还好，也不是每一次都需要使用模板字符串 ${} 的

import styles from 'styles/demo.module.css';
...
<div className={styles.myClassName}></div>

如果真的不想这样做，我感觉应该社区会有一些 plugin 会帮你来做这个操作。或者参考一下这篇文章？直接禁用 CSS Modules 👉 Next.js 项目中禁用 CSS Modules

Answer 2

安装一下 sass 包来启用就行了，你想直接用但是你要配置插件，比如 postcss-nested。但是，这会让你的项目配置更复杂。还是推荐用 CSS Modules，这是Nextjs默认支持的