css - 使用 @dr.pogodin/babel-plugin-react-css-modules 设置 Nextjs？

Question

我可以让 styleName 在浏览器中变成类。但是，css/scss 文件不会加载，并且没有样式应用于该类。

scss 文件以*.module.scss. 我试过了，*.scss但 NextJs 抱怨在 _app.js 之外导入全局 CSS。

开发服务器运行没有问题，但浏览器警告“无法加载样式表”。

如果还有其他方法可以将 styleName 与 CSS 模块和 NextJs 一起使用，我也很乐意尝试。我喜欢 CSS 模块，但不喜欢className={style.stylingClass}. 如果可能的话，想坚持使用 CSS 的 kebab-case。可以使用className={style['styling-class']}，但看起来更糟。

.babelrc

{
  "presets": [
    "next/babel"
  ],
  "plugins": [
    [
      "@dr.pogodin/react-css-modules",
      {
        "exclude": "node_modules",
        "generateScopedName": "[name]_[local]_[hash:base64:5]",
        "webpackHotModuleReloading": true,
        "filetypes": {
          ".scss": {
            "syntax": "postcss-scss"
          }
        }
      }
    ]
  ]
}

next.config.js

module.exports = {
  reactStrictMode: true,
  images: {
    domains: ['dummyimage.com', 'picsum.photos']
  },
  cssModules: true,
  cssLoaderOptions: {
    importLoaders: 1,
    localIdentName: '[name]_[local]_[hash:base64:5]'
  }
}

包.json

"dependencies": {
    "@dr.pogodin/babel-plugin-react-css-modules": "^6.4.1",
    "next": "11.1.2",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "sass": "^1.42.1"
  },
  "devDependencies": {
    "eslint": "8.0.0",
    "eslint-config-next": "11.1.2",
    "postcss-scss": "^4.0.1",
    "standard": "^16.0.4",
    "webpack": "^5.60.0"
  }