如何哈希CSS模块类名称在Nextjs 13?

Question

如何在Next JS中编辑/缩小/散列/隐藏/混淆css类名称?

我尝试了很多方法，包括这个线程

尝试此解决方案时出现以下错误。

yarn build
yarn run v1.22.19
$ next build
warn  - You have enabled experimental feature (appDir) in next.config.js.
warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.
info  - Thank you for testing `appDir` please leave your feedback at https://nextjs.link/app-feedback
warn  - The @next/font/google font Inter has no selected subsets. Please specify subsets in the function call or in your next.config.js, otherwise no fonts will be preloaded. Read more: https://nextjs.org/docs/messages/google-fonts-missing-subsets
info  - Creating an optimized production build
Failed to compile.
HookWebpackError: Unexpected '/'. Escaping special characters with  may help.
at makeWebpackError (C:kvercelnode_modules.pnpmnext@13.0.6_m5sxuueb27gk6ddc5gums6vtgqnode_modulesnextdistcompiledwebpackbundle5.js:28:308185)   
at C:kvercelnode_modules.pnpmnext@13.0.6_m5sxuueb27gk6ddc5gums6vtgqnode_modulesnextdistcompiledwebpackbundle5.js:28:105236
at eval (eval at create (C:kvercelnode_modules.pnpmnext@13.0.6_m5sxuueb27gk6ddc5gums6vtgqnode_modulesnextdistcompiledwebpackbundle5.js:13:28771), <anonymous>:44:1)
-- inner error --
Error: Unexpected '/'. Escaping special characters with  may help.
at C:kvercelstaticcss9db6a345a2f242fe.css:1:817
at Root._error (C:kvercelnode_modules.pnpmnext@13.0.6_m5sxuueb27gk6ddc5gums6vtgqnode_modulesnextdistcompiledcssnano-simpleindex.js:190:78465)   
at Root.error (C:kvercelnode_modules.pnpmnext@13.0.6_m5sxuueb27gk6ddc5gums6vtgqnode_modulesnextdistcompiledcssnano-simpleindex.js:190:124360)   
at Parser.error (C:kvercelnode_modules.pnpmnext@13.0.6_m5sxuueb27gk6ddc5gums6vtgqnode_modulesnextdistcompiledcssnano-simpleindex.js:190:86811)  
at Parser.unexpected (C:kvercelnode_modules.pnpmnext@13.0.6_m5sxuueb27gk6ddc5gums6vtgqnode_modulesnextdistcompiledcssnano-simpleindex.js:190:87297)
at Parser.combinator (C:kvercelnode_modules.pnpmnext@13.0.6_m5sxuueb27gk6ddc5gums6vtgqnode_modulesnextdistcompiledcssnano-simpleindex.js:190:85544)
at new Parser (C:kvercelnode_modules.pnpmnext@13.0.6_m5sxuueb27gk6ddc5gums6vtgqnode_modulesnextdistcompiledcssnano-simpleindex.js:190:78322)    
at Processor._root (C:kvercelnode_modules.pnpmnext@13.0.6_m5sxuueb27gk6ddc5gums6vtgqnode_modulesnextdistcompiledcssnano-simpleindex.js:190:95242)
at Processor._runSync (C:kvercelnode_modules.pnpmnext@13.0.6_m5sxuueb27gk6ddc5gums6vtgqnode_modulesnextdistcompiledcssnano-simpleindex.js:190:95749)

> Build failed because of webpack errors
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Answer 1

感谢@brc-dd在这里更新他的答案。

下面的配置为我工作。

const path = require("path");
const loaderUtils = require("loader-utils");
const hashOnlyIdent = (context, _, exportName) =>
loaderUtils
.getHashDigest(
Buffer.from(
`filePath:${path
.relative(context.rootContext, context.resourcePath)
.replace(/\+/g, "/")}#className:${exportName}`
),
"md4",
"base64",
6
)
.replace(/[^a-zA-Z0-9-_]/g, "_")
.replace(/^(-?d|--)/, "_$1");
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
experimental: {
appDir: true,
},
webpack(config, { dev }) {
const rules = config.module.rules
.find((rule) => typeof rule.oneOf === "object")
.oneOf.filter((rule) => Array.isArray(rule.use));
if (!dev)
rules.forEach((rule) => {
rule.use.forEach((moduleLoader) => {
if (
moduleLoader.loader?.includes("css-loader") &&
!moduleLoader.loader?.includes("postcss-loader")
)
moduleLoader.options.modules.getLocalIdent = hashOnlyIdent;
});
});
return config;
},
};
module.exports = nextConfig;