Webpack和Vue 2.0 UglifyJsPlugin scss calc轉換問題

目前，我已經編寫了一個webpack任務來編譯vue文件。Webpack和Vue 2.0 UglifyJsPlugin scss calc轉換問題

在生產模式下，我使用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更改計算的？

來源

2017-02-28 Teller Yang

在SCSS裝載機，我加-minimize

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

和它的作品真的很好。

更多的，我發現在webpack2中，uglyfyJs的工作非常好。不要以爲將來會出現很多人。

來源

2017-03-01 07:40:44

Webpack和Vue 2.0 UglifyJsPlugin scss calc轉換問題

回答

相關問題