Next.JS 中不应用嵌套的 CSS 样式

Posted 2023-03-06

【中文标题】Next.JS 中不应用嵌套的 CSS 样式

【英文标题】：Nested CSS styles are not applied in the Next.JS

【发布时间】：2021-02-16 10:29:46

【问题描述】：

我正在使用带有sass(1.28.0) 的 Nextjs。不幸的是，嵌套的 css 样式没有应用在网页中。将以下 css 文件导入为 auth.module.scss 并且也没有导入错误。此应用程序也涉及 AMP 页面。如果我遗漏了什么，请纠正我。

 .loginForm
    width:300px;

    .MuiFormControl-root
      width:100%;
      margin-top:20px;
    

这里是next.config.js

const withPWA = require('next-pwa')
const runtimeCaching = require('next-pwa/cache')

module.exports = withPWA(
  pwa: 
    dest: 'public',
    runtimeCaching,
  
)

JSX

 <div className=auth.loginForm>
   <TextField label="Email*" placeholder="Enter Email" autoComplete="current-email" />
 </div>

【问题讨论】：

你也能展示你的 JSX 代码吗？

如果您使用的是 Material UI，请尝试使用那里的文档来覆盖组件。使用 important! 可能有效，但不是一个好方法

我已经更新了JSX。请看一下。 @Vibhav 这个应用程序也涉及 AMP 页面。因此，在样式中添加!important 并不是一个好主意。因为这些样式会被 AMP 脚本删除。

【参考方案1】：

我在项目中使用 Less，但配置应该相似。您需要为 next/sass 启用 CSS 模块配置

const withPlugins = require('next-compose-plugins');

module.exports = withPlugins(
  [
    [
      withSass,
      
        cssModules: true,
        cssLoaderOptions: 
          sourceMap: true,
          localIdentName: '[local]___[hash:base64:5]',
          localsConvention: 'camelCase',
          camelCase: 'dashes',
        ,
      ,
    ],
    [withCSS],
  ],
  ....... // some other global config
);

没有next-compose-plugins，你可能会做如下的事情

const withSass = require('@zeit/next-sass')

module.exports = withSass(
  cssModules: true,
  cssLoaderOptions: 
    importLoaders: 1,
    localIdentName: "[local]___[hash:base64:5]",
  
)