如何在 Storybook Webpack 配置中为情感生成样式添加 CSP 随机数？

Ram*_*raj 7 emotion content-security-policy webpack storybook css-in-js

我们正在添加style src 'self'到 HTML 页面，情感正在动态生成样式到标题，如下所示

<head>
    <style data-emotion>
        ...
    </style>
    <style data-emotion>
        ...
    </style>
    <style data-emotion>
        ...
    </style>
    <style data-emotion>
        ...
    </style>
    ...
</head>

Run Code Online (Sandbox Code Playgroud)

如何使用下面的故事书 webpack 配置为上述样式生成随机数

const path = require('path');

// Export a function. Accept the base config as the only param.
module.exports = {
  webpackFinal: async (config, { configType }) => {
    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
    // You can change the configuration based on that.
    // 'PRODUCTION' is used when building the static version of storybook.

    // Make whatever fine-grained changes you need
    config.module.rules.push({
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader'],
      include: path.resolve(__dirname, '../'),
    });

    // Return the altered config
    return config;
  },
};

Run Code Online (Sandbox Code Playgroud)

https://storybook.js.org/docs/react/configure/webpack

一般来说，为了在 webpack 中生成随机数，我们喜欢 - https://github.com/cssinjs/jss/issues/559

Emotion 有以下链接，告诉我们可以使用添加随机数CacheProvider，但不太清楚如何实现相同的 - https://emotion.sh/docs/@emotion/cache#nonce

如果有人能告诉我有关在故事书 webpack 配置中为情感样式设置随机数的提示，那将会很有帮助

归档时间：	4 年，7 月前
查看次数：	1403 次
最近记录：	4 年，7 月前