css - 如何在 vue cli 中丑化 css？

Question

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

我在其中创建了一个 scss 文件，src/style.scss然后使用 main.ts: 将其导入import './style.scss。

.some {border:1px solid red;}

在 app.vue 中：

   <div class="some">...

在 prod 中构建应用程序时如何进行 css uglify？丑化之前：丑化.some { 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
            }),
        ]
    },
}

标签： cssvue.jssassvue-cli