How to uglify css in vue cli?

I create a vue application using the cli: vue create vue-app.

I create a scss file in src/style.scss and I import it using main.ts: import './style.scss.

.some {border:1px solid red;}

and in app.vue:

   <div class="some">...

How I do css uglify when I build the application in prod? before uglify: .some { display:block; } after uglify: .x {display:block;}.

I add optimize-css-assets-webpack-plugin to my vue.config.js.

after I compile I open the css file in dist folder, and the class name (some) is the same..

.....a[data-v-32fde4c9]{color:#42b983}.some{border:1px solid red}

vue.config.js:

const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {

     configureWebpack: {
        plugins: [
            new OptimizeCssAssetsPlugin({
                assetNameRegExp: /\.optimize\.css\.scss$/g,
                cssProcessor: require('cssnano'),
                cssProcessorPluginOptions: {
                    preset: ['default', { discardComments: { removeAll: true } }],
                },
                canPrint: true
            }),
        ]
    },
}