严格CSP:如何在next.js中为样式组件设置nonce？

npm install @zeit/next-css @zeit/next-sass

const withCSS = require('@zeit/next-css');
const withSass = require('@zeit/next-sass');

module.exports = withCSS(withSass({
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    // 在这里设置nonce
    config.module.rules.push({
      test: /\.css$/,
      use: [
        {
          loader: 'style-loader',
          options: {
            attributes: {
              nonce: 'your-nonce-value' // 替换为你的nonce值
            }
          }
        },
        'css-loader'
      ]
    });

    return config;
  }
}));

import styles from './styles.module.css';

const Component = () => (
  <div className={styles.container}>
    <h1>Hello, World!</h1>
  </div>
);

export default Component;