Vue failed to load css file style into index.html

problem description

when I introduce a local third-party CSS file into the index.html of vue, the browser will appear a prompt, and the style will not take effect

clipboard.png

clipboard.png

the environmental background of the problems and what methods you have tried

searched the Internet for the problem of what interceptor it was, but couldn"t find any modification methods related to vue

related codes

(er, codeshelper rules, so I have to write the code here, manually funny)

what result do you expect? What is the error message actually seen?

I hope the Great God can help me solve the doubt. Thank you.

Update: well, I tried the method of the two people downstairs, and it didn"t work, but I can quote the css path of the font-awesome of the external CDN, so I think it"s something else. My current solution is to introduce the css file directly into main.js until we can figure it out. Thank you all.

Sep.29,2021

generally in Response Headers, the Content-Type of CSS should be: Content-Type: text/css , but for some reason, it returns: Content-Type: text/html ; resulted in a type error.

you can try it:

  1. restart your debugger (webpack or others)
  2. use the absolute path / your/path/to/font-awesome.min.css instead of the relative path . / your/path/to/font-waesome.min.css
  3. create a new file with the suffix * .css , and copy all the original css text to it

I prefer font-awesome.min.css that there is something wrong with the format of the file (that is, the third point).

-

add: for @ Trojan, I'm not used to declaring type= "text/css" on the page, so I specifically searched it:

.

stackoverflow answered about type, pointing out that type is a constructive statement in the HTML5 standard and will not have a substantial impact on resource resolution in modern browsers. If the questioner's troubles can be solved only by declaring type=" text/css ", please also reply.


A new way of thinking was changed in the afternoon. The problem is solved. The third party's css or js needs to be placed in the static folder at the same level as src and then referenced in index.html to be valid

. Things in

clipboard.png

clipboard.png

srcpluginsconfig

clipboard.png
src are best introduced through es6's import. Roughly like this, the specific do not know, but also know the guidance of friends.


see if the hint is missing type= "text/css". Just add this attribute to the link tag.

Menu