I'am using tailwind css for my css framework, and I'am trying to Hash my tailwind css class using webpack css-loader, the css classes is completed to hash, but the html class is still showing the regullar class
[
]
this is my next.config.js
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const nextConfig = {
reactStrictMode: true,
// distDir: 'build', custom output build
webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
console.log("is develop", dev)
config.module.rules.push(
{
test: /\.(css|s[ac]ss)$/i,
use: [
!dev ? MiniCssExtractPlugin.loader : 'style-loader',
{
loader: 'css-loader',
options: {
modules: {
localIdentName: "_[hash:base64:5]",
},
}
},
'postcss-loader',
'sass-loader',
]
}
)
config.optimization.minimizer.push(
new CssMinimizerPlugin(),
)
config.plugins.push(
new MiniCssExtractPlugin({
filename: 'static/css/[contenthash].css'
}),
)
return config
},
env: {
WORDPRESS_BE: process.env.WORDPRESS_BE,
API_URL: process.env.API_URL,
ASSET_URL: process.env.ASSET_URL,
CRYPTO_SECRET_KEY: process.env.CRYPTO_SECRET_KEY,
API_SAMPLE: process.env.API_SAMPLE,
},
}
module.exports = nextConfigI'am expecting the html class should match with css hash class
