如何解决我如何将 react Jss 的多个样式标签更改为缩小的样式表?
我正在使用 react 与 nextjs 和 react-jss 进行样式设置,并尝试将 react Jss 的多个样式标签更改为一个缩小的样式表。我尝试了 react-jss 中 SheetRegistry 类的 toString() 方法,但它不起作用。
multiple style tags being generated
这是我的_document.tsx
class MyDocument extends Document {
static async getInitialProps(ctx) {
const registry = new SheetsRegistry();
const generateId = createGenerateId();
const originalRenderPage = ctx.renderPage;
const sheet = new ServerStyleSheet();
try {
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App) => (props) => (
<JssProvider registry={registry} generateId={generateId}>
{sheet.collectStyles(<App {...props} />)}
</JssProvider>
),});
const initialProps = await Document.getInitialProps(ctx);
return {
...initialProps,styles: (
<>
{initialProps.styles}
{sheet.getStyleElement()}
<style id="server-side-styles">{registry.toString()}</style>
</>
),};
} finally {
sheet.seal();
}
}
这是我的 next.config.ts
const withTM = require("next-transpile-modules")(["shared"]);
const withImages = require("next-images");
const nextSourceMaps = require("@zeit/next-source-maps");
const withCSS = require("@zeit/next-css");
const withSass = require("@zeit/next-sass");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const path = require("path");
module.exports = withCSS(
withSass(
withImages(
nextSourceMaps(
withTM({
distDir: "../../build",sassOptions: {
includePaths: [path.join(__dirname,"styles")],},webpack: (config,{ isServer }) => {
config.optimization.minimizer = [];
config.optimization.minimizer.push(new OptimizeCSSAssetsPlugin({}));
if (!isServer) {
config.resolve.alias["@sentry/node"] = "@sentry/browser";
}
return config;
},})
)
)
)
);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。