Next.js SSG 应用程序上的 Webpack 转换 unicode 字符并将它们弄乱

问题描述

我正在开发一个 web 应用程序，使用 Next.js 和 SSG（我的应用程序导出到 .html 文件）。整个事情都按预期工作，但我在样式方面遇到了问题，而且我在网上找不到关于此问题的任何信息。

我正在使用 css 模块 + scss 来编写样式表。而且，一切都已经按预期进行。问题只是当我在伪元素中使用 unicode 字符时 content:

.some-class {
    // some css rules
    &::after {
        content: "\00BB";
        // some more css rules
    }
}

我期望的结果是在伪元素上有 » 字符。在 localhost (next.js' npm run dev) 上运行，它可以工作。但是当我运行 next build && next export（为应用程序构建和生成 HTML 文件）时，作为最终结果，我在生成的样式表本身上得到了 Â»（它甚至不是编码问题，是“构建时”问题，因为 \00BB 正在转换为 Â»）。

然后我也尝试设置 content: "»"，但结果是一样的。还有，content: "\\00BB"，但它被渲染为普通的 "\\00BB"（根本没有转换）。

我的next.config.js设置如下：

module.exports = () => {
    const publicRuntimeConfig = {
        // some runtime configs
    };

    // This was necessary because the scss files were being generated as a single,giant file
    const webpack = (config,{ buildId,dev,isServer,defaultLoaders,webpack }) => {
        if (config.optimization.splitChunks) {
            config.optimization.splitChunks.cacheGroups.shared = {
                name: 'my-app-name',test: /\.scss$/,chunks: 'all',enforce: true,};
        }

        return config;
    }

    return { publicRuntimeConfig,webpack };
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

css-modules sass sass webpack webpack webpack