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

【问题标题】：Nested CSS styles are not applied in the Next.JSNext.JS 中不应用嵌套的 CSS 样式
【发布时间】：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 脚本删除。

标签： reactjs sass next.js

【解决方案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]",
  }
})

【讨论】：