简体   繁体   中英

Сannot load stylesheet after adding in web.config file rules <rewrite>

Well, I have a simple bootstrap page, with CSS styles and background for the site on IIS, which is available during the upgrade of the main site.

Everything works fine, the page displays styles work until you need to configure properly redirect.

Created a file in the directory with a stub web.config and added the code there (the user on the page web.test.com/something moved to web.test.com :

<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <system.webServer>
        <rewrite>
            <rules>
                <rule name="Rewrite to root" stopProcessing="true">
                    <match url="." />
                    <action type="Redirect" url="https://{HTTP_HOST}" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

After adding the rule, I see a page without styles, only letters and blank background

Add to file web.config

<location path="images">
<system.web>
  <authorization>
    <allow users="*"/>
  </authorization>
</system.web>
</location>
<location path="css">
<system.web>
  <authorization>
    <allow users="*"/>
  </authorization>
</system.web>
</location>

Nothing change, what do I do wrong?

CSS file

body {  
    background: url(../images/bg.jpg)no-repeat 0px;
    background-attachment:fixed;
    background-size: cover; 
    background-position: center center;

}
h1 {
    font-size: 5em;
    text-align: center;
    color: #3C362B;
    letter-spacing: 1px;
    font-weight: 500;
    font-family: 'Mistral', cursive;
}
/*--main--*/
.main {
    padding: 3.5em 0 0;
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.main-row {
    width: 110%;
    margin: 1em auto;
}
.main-row p {
    font-family: 'Monotype Corsiva', serif;
    font-size: 1.3em;
    color: #3C362B;
    line-height: 2em;
    font-weight: 500;
    letter-spacing: 1px; 
}

Index. html file

<!DOCTYPE html>
<html>
<head>
<title>Site for upgrade</title>
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Custom Theme files -->
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<!-- //Custom Theme files -->

</head>
<body>
    <!-- main -->
        <div class="main">
            <h1>Site for upgrade..</h1>
                <div class="main-row">
                    <p>We apologize for any inconvenience. Work on the update is underway. The site will be available soon.</p>
                </div>
        </div>  
    <!-- //main -->  
</body>
</html>

Press F12 check the 404 http request.

Created a file in the directory with a stub web.config and added the code there (the user on the page web.test.com/something moved to web.test.com:

Obviously because there is a error with the path of your file.

How to solve it?

  1. Change the path in your static files, like css file.

  2. Workaround: Copy and paste all the static file to the path which you find it by using F12 Network tools, this method is only used to verify whether the issue is due to this reason.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM