Question

我正在使用汇总来捆绑代码。为了捆绑CSS，我使用了rollup-plugin-postcss。我不知道如何将哈希添加到生成的css文件。这是我的postCss配置：

        postcss({
            plugins: [autoprefixer()],
            sourceMap: !isProd,
            extract: `${BUILD_DIR}/styles/index.css`,
            modules: true,
            minimize: isProd,
            use: ['sass'],
            extensions: ['.scss'],
            inject: false,
            autoModules: false,
        }),

通过此配置，我可以在构建目录中生成index.css，但是我想生成index-[hash_string].css

Answer 1

如果您可以为 JS 和 CSS 包使用相同的名称，则可以实现此目的。

要点是您的 JS 包可以自动使用哈希命名，而您的 CSS 包可以自动获得相同的名称：

JS：使用支持 [hash] 占位符的 entryFileNames。
CSS：如果您没有在 extract 选项中指定自定义文件名，它将显示为“extract CSS to the same location where JS file is generated but with .css extension”。

output: {
  // ...
  dir: `${BUILD_DIR}/styles`,
  entryFileNames: "[name].[hash].js",
},
plugins: [
  postcss({
    extract: true
    // ...
  }),
],

使用汇总和roll-plugin-postcss时如何将哈希添加到生成的CSS文件

1 个答案: