After the website is deployed to the server, the CSS file is loaded successfully, but it does not take effect

I just solved a problem. After the front-end code is published to the server, the style does not take effect.

At first I thought there was a problem with the static resource path configured by nginx, but found that the css file request was indeed successful through the network.

Then I suspect that there is a problem with the code, check the style of one of the dom nodes in the css file, it can indeed match ( data-xxxconsistent), copy the style and add it manually through the elements Kanban, and the style also takes effect.

The file is downloaded successfully, and the content is fine, but it just doesn’t take effect. It seems that the browser didn’t build the CSSOM accordingly (this can be checked through the performance debugging tool), and such a magical thing has never been encountered before.

Later, it was found that the nginx configuration was wrong. Since the configuration file was organized and sent to the operation and maintenance for deployment, it was not verified carefully. The MIME configuration was missing in the nginx configuration file:

include       mime.types;

confBy default, there is a file in the directory of nginx mimx.types, which contains various MIME configurations, the content:


types {
    text/html                                        html htm shtml;
    text/css                                         css;
    text/xml                                         xml;
    image/gif                                        gif;
    image/jpeg                                       jpeg jpg;
    application/javascript                           js;
    application/atom+xml                             atom;
    application/rss+xml                              rss;

   ...
}

On the right is the file suffix, on the left is the MIME associated with this file type.

typesThe server will search for the corresponding MIME in the configuration according to the suffix of the resource file , and then add it to the response header content-type, so that the client will know how to deal with it after receiving the response, for example, text/cssit will build CSSOM.

Guess you like

Origin blog.csdn.net/u012961419/article/details/124662048