search

vuetifyjs / vue-cli-plugins

🔌 A collection of Vuetify plugins for Vue CLI
https://vuetifyjs.com/en/getting-started/quick-start#vue-cli-3
Other
428 stars 113 forks source link

[Bug Report] npm run build breaks with parse error on google fonts link #180

Closed TJBrunson closed 3 years ago

TJBrunson commented 4 years ago

Environment

Browsers: Chrome 81.0.4044.129 OS: Mac OS 10.14.6

Steps to reproduce

  1. create new project
  2. "vue add vuetify"
  3. npm run build

Expected Behavior

Project should build as expected

Actual Behavior

 ERROR  Failed to compile with 1 errors                                                                                                                                                                                                        11:28:55 AM

  Error: Parse Error: <link type="text/css" href=’https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons'
      rel=”stylesheet”>

Reproduction Link

Other comments

I fixed this by breaking the link line into separate links for Roboto and then Material Icons. Like this:

<link type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700"
    rel=”stylesheet”>
    <link type="text/css" href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

I used this stack overflow issue for reference: https://stackoverflow.com/questions/22466913/google-fonts-url-break-html5-validation-on-w3-org

The second answer down suggest breaking the link in the question into separate links and that there is an encoding issue with using "|" in the link. I attempted to encode the "|" as "%7C" but that didn't work for me. Only splitting it into multiple lines worked.

ElijahKotyluk commented 3 years ago

I was unable to reproduce this. I followed the reproduction steps and was able to run npm run build just fine without any errors, so I am going to close this issue.