Webpack 和 Vue 2.0 UglifyJsPlugin scss 计算转换问题答案

【问题标题】：Webpack and Vue 2.0 UglifyJsPlugin scss calc transform issueWebpack 和 Vue 2.0 UglifyJsPlugin scss 计算转换问题
【发布时间】：2017-02-28 02:23:43
【问题描述】：

目前，我已经编写了一个 webpack 任务来编译 vue 文件。

在生产模式下，我使用 UglifyJsPlugin 对 index.js 进行压缩和压缩，它可以很好地工作很长时间。

但是我发现在生产模式下scss中的样式

width: calc(100% / 3);

转化为

width: 33.33333%;

这会导致我的页面出现黑线。

我尝试删除 postcss，但它不起作用。最后我发现如果我删除UglifyJsPlugin 效果很好，但是文件太大了，我必须使用在线压缩服务来缩小它。

这是webpack任务的一部分

if (process.env.NODE_ENV === 'production') {
    const htmlFiles = glob.sync('./dev/*.html');
    const htmlPlugins = htmlFiles.map((file, i) =>
        new HtmlWebpackPlugin({
            filename: path.basename(file),
            template: file,
            inject: false,
            minify:{
                removeComments: true,
                collapseWhitespace: true,
            },
    }));

webpackConfig = merge(baseWebpackConfig, {
    plugins: [
        ...htmlPlugins,
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false,
                drop_console: true,
            },
        }),
        new CopyWebpackPlugin([
            {
                from: './dev',
            },
        ], {
            ignore: [
                '*.html',
                'router.js',
                'style/**/*',
                'script/**/*',
                'store/**/*',
                'vendor/**/*',
                'component/**/*',
                'data/**/*',
                'font/**/*',
            ]}),
       ]});
    }

而 postcss.config.js 是

module.exports = {
    plugins: [
        require('postcss-cssnext')({
            features: {
                calc: false,
            },
        }),
        require('postcss-sorting')(),
    ],
};

有什么方法可以防止uglyfyJs 改变计算吗？

【问题讨论】：

标签： webpack vuejs2 calc html-webpack-plugin

【解决方案1】：

在 scss 加载器中，我添加了 -minimize

scss: 'style!css?-minimize!postcss!sass',

而且效果很好。

此外，我发现在 webpack2 中，uglyfyJs 的效果非常好。不要以为以后会有很多人想到。

【讨论】：