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

Question

我将Nextjs与sass(1.28.0)一起使用。不幸的是，嵌套的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>

Answer 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]",
  }
})