How to add hash to the generated css file when using rollup and roll-plugin-postcss

user_12351927 0
Viewed 2007

I'm using rollup to bundle the code. For bundling the css I'm using rollup-plugin-postcss. I'm not able to figure out how to add hash to the generated css file. Here is my postCss config:

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

With this config I'm able to generate index.css in the build directory but I want to generate index-[hash_string].css

css-modules rollup postcss
1 Answers

You can achieve this if you're ok with using the same name for both your JS and CSS bundles.

The gist is that your JS bundle can be automatically named with a hash, and your CSS bundle can automatically get the same name:

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