[v3] CSS minification error on framework7.css 3.1.0 with vue-cli 3
See original GitHub issue- Framework7 version: [e.g. 3.1.0]
- Platform and Target: [Web]
- Reproduction: See this repo.
yarn run build
Describe the bug
Production build fails.
To Reproduce
Steps to reproduce the behavior:
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.
Expected behavior
Build should succeed.
If you remove framework7.cc in main.js, the build will be successful:
Uncomment framework7.css:
// Import F7 Styles
// eslint-disable-next-line
// import Framework7Styles from "framework7/css/framework7.css";
Issue Analytics
- State:
- Created 5 years ago
- Comments:7 (4 by maintainers)
Top Results From Across the Web
Vue App CSS minification error - LinkedIn
Wondering why "npm run serve" works perfectly, while "npm run build" fails? Yesterday, I ran into an issue which was quite new to...
Read more >CSS minification error in npm run build [vue.js] - Stack Overflow
After the build process had completed, I then pasted the codes inside of the file (in my case dist/css/argon.css) and the vuejs created...
Read more >validationerror: invalid options object. dev middleware has ...
I believe 3.x is not fully compatible. Open side panel ... CSS Loader has been initialized using an options object that does not...
Read more >vue-cli 3.0 与framework7 的一个css 问题- 个人文章
File: chunk-vendors.842c282c.css Error: CSS minification error: Parse error on line 1: 8px + constant(safe-area-i ------^ Expecting 'SUB', ...
Read more >cookie run thailand - CSDN
NET Core Vue Starter CLI 3.0 A Vue starter template using Vue CLI 3.0 with custom ... pretty-checkbox-vue - Implementation of pretty checkbox...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Issue here is not in Framework7, but in the optimize-css-nano plugin which doesn’t understand such CSS rules
This css rules are used in iOS and must be used there, issue is closed because it is not related to Framework7
https://medium.com/@draganeror/iphone-x-layout-features-with-css-environment-variables-d57423433dec