Javascript 如何在webpack/vue cli中使用uglifyjs缩小和压缩css/SCS？

我有带cli的vue应用程序。我想用

因此，我将以下代码添加到我的vue.config.js中：

configureWebpack: {
    optimization: {
      minimizer: [
        new UglifyJsPlugin({
          uglifyOptions: {
            warnings: false,
            parse: {},
            compress: {},
            mangle: true, // Note `mangle.properties` is `false` by default.
            output: null,
            toplevel: false,
            nameCache: null,
            ie8: false,
            keep_fnames: false,
         },
     }),
  ],
},

const merge = require('lodash/merge');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {

  css: {
    loaderOptions: {
      sass: {
        prependData: `
              @import "~@/sass/mixins.scss";
            `,
      },
    },
  },

  configureWebpack: {
    optimization: {
      minimizer: [
        new UglifyJsPlugin({
          uglifyOptions: {
            warnings: false,
            parse: {},
            compress: {},
            mangle: true, // Note `mangle.properties` is `false` by default.
            output: null,
            toplevel: false,
            nameCache: null,
            ie8: false,
            keep_fnames: false,
          },
        }),
      ],
    },
  },

};

我想压缩*.scss和*.vue文件中存在的所有css。如何配置

UglifyJsPlugin

进行压缩和缩小？例如，我有一个选择器：

。有些东西

的输出应该是：

.x

以下是不起作用的内容：

app.vue

<template>
  <div class="some">appp</div>
</template>

<script>
export default {
  name: 'App',
};
</script>

<style lang="scss" scoped>
 .some { border:1px solid red;}
</style>

我的完整vue.config.js：

configureWebpack: {
    optimization: {
      minimizer: [
        new UglifyJsPlugin({
          uglifyOptions: {
            warnings: false,
            parse: {},
            compress: {},
            mangle: true, // Note `mangle.properties` is `false` by default.
            output: null,
            toplevel: false,
            nameCache: null,
            ie8: false,
            keep_fnames: false,
         },
     }),
  ],
},

const merge = require('lodash/merge');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {

  css: {
    loaderOptions: {
      sass: {
        prependData: `
              @import "~@/sass/mixins.scss";
            `,
      },
    },
  },

  configureWebpack: {
    optimization: {
      minimizer: [
        new UglifyJsPlugin({
          uglifyOptions: {
            warnings: false,
            parse: {},
            compress: {},
            mangle: true, // Note `mangle.properties` is `false` by default.
            output: null,
            toplevel: false,
            nameCache: null,
            ie8: false,
            keep_fnames: false,
          },
        }),
      ],
    },
  },

};

css/app.css包含以下内容：

.some[..] {border:1px solid red;}...

**在@Tony Ngo回答后编辑**

const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {

  css: {
    loaderOptions: {
      sass: {
        prependData: `
              @import "~@/sass/mixins.scss";
            `,
      },
    },
  },

  configureWebpack: {
    optimization: {
      minimizer: [
        new UglifyJsPlugin({
          cache: true,
          parallel: true,
          sourceMap: false,
          extractComments: 'all',
          uglifyOptions: {
            compress: true,
            output: null,
          },
        }),
        new OptimizeCSSAssetsPlugin({
          cssProcessorOptions: {
            safe: true,
            discardComments: {
              removeAll: true,
            },
          },
        }),
      ],
    },
    plugins: [
      new CompressionPlugin({
        test: /\.(js|css)/,
      }),
      new UglifyJsPlugin(),
    ],
  },

  chainWebpack: (config) => {
    // nothing here yet
  },
};

---

仍然

。一些
在我的app.css包中。我想缩小和压缩，所以我希望类似于
.x
的东西，您可以查看我的完整代码

这是基本设置，你需要丑化你的代码

module.exports = {
    optimization: {
        minimizer: [
            new UglifyJsPlugin({
                cache: true,
                parallel: true,
                sourceMap: false,
                extractComments: 'all',
                uglifyOptions: {
                    compress: true,
                    output: null
                }
            }),
            new OptimizeCSSAssetsPlugin({
                cssProcessorOptions: {
                    safe: true,
                    discardComments: {
                        removeAll: true,
                    },
                },
            })
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: "[id].css"
        }),
        new CompressionPlugin({
            test: /\.(js|css)/
        }),
        new UglifyJsPlugin(),
    ],
    module: {
        rules: [{
                test: /\.scss$/,
                use: [
                    'style-loader',
                    MiniCssExtractPlugin.loader,
                    {
                        loader: "css-loader",
                        options: {
                            minimize: true,
                            sourceMap: true
                        }
                    },
                    {
                        loader: "sass-loader"
                    }
                ]
            },
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                loader: ["babel-loader", "eslint-loader"]
            },
            {
                test: /\.(jpe?g|png|gif)$/i,
                loader: "file-loader"
            },
            {
                test: /\.(woff|ttf|otf|eot|woff2|svg)$/i,
                loader: "file-loader"
            }
        ]
    }
};

嗯，我照你说的做了。但是当我打开app.css时，我仍然看到一些类。如果有帮助-我可以将问题编辑到我的新vue.config.js