前端 - 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

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

Answer 2

报错信息里面说明了解决方案了呀。
移动到 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