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-xxx
consistent), 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;
conf
By 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.
types
The 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/css
it will build CSSOM.