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

站长

2024年06月30日 09:25 · 阅读数 16

**大佬们都采用的是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 引用方式正确吗？🐡🐡🐡 nextjs不使用css model,直接用.parentclass{ .class{} }方式？

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

nextjs不使用css model,直接用.parentclass{ .class{} }方式？大佬们看看，他就是这样跑起来了。但是新创目录拉下来就跑不起来。因为能这样跑起来我心想这样写应该是可行的，只是我不知道配置。按照官方要求使用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

1个回答

test

2024-06-30

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

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

看来你的问题是，你想在组件层级直接 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

适合作为回答的

经过验证的有效解决办法
自己的经验指引，对解决问题有帮助
遵循 Markdown 语法排版，代码语义正确

不该作为回答的

询问内容细节或回复楼层
与题目无关的内容
“赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容

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

相关链接