摘要：發現問題看到和都升級到了團隊打算用新版本做些新東西有和中文文檔的加成開始還算順利也能把項目跑起來但是打包的時候發生問題了報錯如下分析問題首先觀察這是一個的報錯說是函數沒有收到正確的值再

看到 vue-cli3 和 framework7 都升級到3.0了,團隊打算用新版本做些新東西.
有 https://github.com/framework7... 和 vue-cli3 中文文檔的加成, 開始還算順利, npm run serve 也能把項目跑起來. 但是 npm run build 打包的時候發生問題了. 報錯如下:

 ERROR  Error: CSS minification error: Parse error on line 1:
8px + constant(safe-area-i
        ------^
Expecting "SUB", "LPAREN", "NESTED_CALC", "NUMBER", "CSS_VAR", "LENGTH", "ANGLE", "TIME", "FREQ", "RES", "EMS", "EXS", "CHS", "REMS", "VHS", "VWS", "VMINS", "VMAXS", "PERCENTAGE", got "PREFIX". File: chunk-vendors.842c282c.css
Error: CSS minification error: Parse error on line 1:
8px + constant(safe-area-i
------^
Expecting "SUB", "LPAREN", "NESTED_CALC", "NUMBER", "CSS_VAR", "LENGTH", "ANGLE", "TIME", "FREQ", "RES", "EMS", "EXS", "CHS", "REMS", "VHS", "VWS", "VMINS", "VMAXS", "PERCENTAGE", got "PREFIX". File: chunk-vendors.842c282c.css
    at D:workmobile3
ode_modules@intervolgaoptimize-cssnano-pluginindex.js:106:21
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! mobile3@0.1.0 build: `vue-cli-service build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the mobile3@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:UserszzAppDataRoaming
pm-cache\_logs2018-08-16T05_07_51_763Z-debug.log

首先觀察這是一個 CSS minification 的報錯, 說是 calc 函數沒有收到正確的值.
再以報錯信息 8px + constant(safe-area-i 搜索 f7 的 css 文件 發現很多這樣的代碼:

padding-left: calc(8px + constant(safe-area-inset-right));
padding-left: calc(8px + env(safe-area-inset-right));

然后搜索 safe-area-inset-right, 發現這是一個 iPhone X (有文章: http://www.css88.com/archives... )的屬性, 作用是用來解決iPhone X 額頭的凹槽帶來的問題.
再以 constant 為關鍵字去搜索 vue-cli3 的issue.
https://github.com/vuejs/vue-... 尤大表示是 cssnano 的問題
https://github.com/framework7... framework7 的作者表示這是 ios 必須的, 不是我的錯, 請向 cssnano 提出問題.
https://github.com/cssnano/cs... cssnano 說 safe-area-inset-right 這個屬性是非標準的, 是蘋果 iPhone x 私有的, 而且也不是我的鍋, 你看看 reduce-css-calc 吧
https://github.com/MoOx/reduc... reduce-css-calc 表示知道,但沒有解決

總結一下, f7 使用了一個iPhone x 專用的非標準 css 屬性, 導致 cssnano 中一個處理 calc 的小插件標錯.

首先想到的是取消 cssnano 中這個小插件的使用, 首先嘗試修改 node_modules/@vue/cli-service/lib/config/css.js 中的 cli 配置文件將下面一段全部注釋掉

webpackConfig
        .plugin("optimize-css")
          .use(require("@intervolga/optimize-cssnano-plugin"), [{
            sourceMap: options.productionSourceMap && sourceMap,
            cssnanoOptions: cssProcessorOptions
          }])

嘗試注釋掉整個 cssnano, 發現 npm run build 可以通過, css未壓縮.
然后看能不能只取消 calc 插件的使用, 看 https://cssnano.co/ cssnano 官網, npm, github, 愣是沒找到完整的參數配置說明, 只有 https://cssnano.co/guides/pre... 中的簡單介紹和示例, 在 cli 的配置文件中嘗試設置 calc:false 也沒有用,這個方法失敗.

取消使用行不通只能等 cssnano 的大神再看看了,畢竟iPhone用戶那么多,總會解決的.但是項目不等人,考慮到即便這個插件更新了也還要等 vue-cli 更新,打算先找個臨時解決方法.
考慮了一下, 官方示例是在 main.js 中引用 css文件的, 所以css 要經過優化處理. 但是 f7 官方其實提供了 framework7.min.css 這樣的文件, 完全可以不經過我們的優化處理直接使用,所以嘗試直接在 index.html 中引用 css 文件.首先考慮直接把 css 文件拿出來放到 public 目錄, 但是覺得不妥, 一方面這個 css 文件放入版本管理有些不必要, 另一方面每次 f7 更新都要記得自己去更新這個文件很麻煩, 所以參考官方文檔 https://cli.vuejs.org/zh/config/#chainwebpack 的語法修改 webpack 配置,用 copy 插件把文件拷貝出來
代碼如下:

// vue.config.js
const path = require("path");
module.exports = {
  chainWebpack: config => {
    config
      .plugin("copy-f7-css")
      .use(require("copy-webpack-plugin"), [[{
        from: path.resolve(__dirname,"./node_modules/framework7/css/framework7.min.css"),
        to: path.resolve(__dirname,"./dist/css"),
      }]])
  }
}

同時把 main.js 里的 f7 的 css 引用注釋掉.
執行 npm run build 問題解決.
只是以后我們自己想使用 safe-area-inset- 這樣的屬性還會造成錯誤的, 所以不算正真地解決了這個問題, 不過只能先這樣解決了.