我使用CLI:vue create vue-app创建了一个vue应用程序。

我在src/style.scss中创建一个scss文件，并使用main.ts:import'。/style.scss导入它。

.some {border:1px solid red;}

在app.vue中:

   <div class="some">...

当我在Prod中构建应用程序时，我是如何做css丑化的？ Uglify之前:。一些{display:block；}之后:.x{display:block；}。

我将optimize-css-assets-webpack-plugin添加到我的vue.config.js中。

编译后，我打开dist文件夹中的css文件，类名(some)是相同的。

.....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
            }),
        ]
    },
}