如何在vue cli中对CSS进行丑化？

Question

我使用cli创建vue应用程序：vue create vue-app。

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

.some {border:1px solid red;}

以及在app.vue中：

   <div class="some">...

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

Answer 1

考虑使用CSS Modules，因为它与高级scope of use差不多，因此可以完成您的工作（尽管这并不是混淆或“丑化”的过程）。

幸运的是，you can use CSS Modules in *.vue files out of the box with <style module>。

唯一的问题可能是您引用类的方式。例如：

*.vue

开发

<style module>

生产

<style module>
.red {
  color: red;
}
.bold {
  font-weight: bold;
}
</style>

生成的标识符完全是

<template>
  <p :class="$style.red">
    This should be red
  </p>
</template>

。