Vue-cli: Prod build fails on framework7.css

Created on 2 Aug 2018 · 5Comments · Source: vuejs/vue-cli

Version

3.0.0-rc.10

Node and OS info

10.7.0 / yarn 1.7.0 / macOS

Steps to reproduce

Git clone https://github.com/zoosky/framework7-template-split-vue-webpack
yarn;
yarn build

What is expected?

Build should end with success

What is actually happening?

Build fails.

‘’’’
framework7-template-split-vue-webpack git:(master) ✗ yarn build
yarn run v1.7.0
$ vue-cli-service 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: css/chunk-vendors.cd97c7e3.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: css/chunk-vendors.cd97c7e3.css
at /Users/andreas/dev/examples/framework7/framework7-template-split-vue-webpack/node_modules/@intervolga/optimize-cssnano-plugin/index.js:106:21
error Command failed with exit code 1.
‘’’

Most helpful comment

As a workaround I disabled postcss-calc. In my project using Vue CLI (3.0.1) I created a new configuration file cssnano.config.js:

const defaultPreset = require('cssnano-preset-default')

module.exports = defaultPreset({
  calc: false
})

With this configuration the production build succeeds. The result looks fine on the iPhone 7. Not tested on other iPhone models or browsers.

umbertooo on 28 Aug 2018

👍8 😄1

All 5 comments

This is a cssnano issue, there's nothing we can do in Vue CLI.

yyx990803 on 2 Aug 2018

I'm having the same problem with Framework7 and Vue CLI.
Is there a way to tell cssnano to ignore specific CSS-files? Maybe through css.loaderOptions.postcss in vue.config.js?

max-preuschen on 21 Aug 2018

👍2

As a workaround I disabled postcss-calc. In my project using Vue CLI (3.0.1) I created a new configuration file cssnano.config.js:

const defaultPreset = require('cssnano-preset-default')

module.exports = defaultPreset({
  calc: false
})

With this configuration the production build succeeds. The result looks fine on the iPhone 7. Not tested on other iPhone models or browsers.

umbertooo on 28 Aug 2018

👍8 😄1

@umbertooo Thanks! That works.

max-preuschen on 29 Aug 2018

Combining this with this stackoverflow answer I found adding this to my vue.config.js solved the issue with cssnano choking on calc() functions in Stylus:

    chainWebpack: config => {
        config.plugin("optimize-css").tap(([options]) => {
            // https://github.com/vuejs/vue-cli/issues/2033#issuecomment-416713827
            // https://stackoverflow.com/questions/52014764/how-do-i-add-cssnano-optimization-rules-in-vue-cli-3
            options.cssnanoOptions.preset[1].calc = false;
            return [options];
        });
    }