why i have to rename the css file so that it can be work, is there something wrong?

Question

I have finished editing the css file and saving it
but my css file doesn't work and doesn't change the display at all
and css files are also not loaded

but after I renamed the css file, everything work properly
css file loaded and the display changes

is there something wrong with the structure of my folder?
or is there something wrong with my coding?

my custom css is

<link rel="stylesheet" href="../style/index.css">

and this is my head tag

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <!-- Custom CSS -->
    <link rel="stylesheet" href="../style/index.css">
    <link rel="stylesheet" href="../css/pace.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="../css/fontawesome.css">
    <title>Dashboard • Sistem Pakar</title>
</head>

my folder structure
act/
|---.....
|
assets/
|---.....
|
css/
|---.....
|
js/
|---.....
|
lib/
|---.....
|
style/
|---index.css
|
app/
|---index.php

As far a you have shown in the code, there should not be any errors on the code, what is the problem you have? — IvanS95, Oct 31 '18 at 18:10
Is your CSS being cached? If so, you can add a parameter (`index.css?epoch=1541007975`) so that the browser treats it as a separate file and ignores the cache or modify the HTTP headers your web server sends. — spacer GIF, Oct 31 '18 at 18:16
If I were to guess, you probably mean the relative paths using `../` — Brian, Oct 31 '18 at 18:20

score 1 · Answer 1 · answered Oct 31 '18 at 18:16

If you are facing the issue that you are changing the css code but changes are not reflecting on browser. Its because browser cache your css and do not reload it from server (files). To manually reload it you need to:

Reload page by pressing ctrl+F5
Use some extension to clear cache of your browser
rename css file name so that browser can load new file
use some task runner like grunt etc to uglify and rename your css

you can try any of above method for you convenience

score 0 · Answer 2 · edited Nov 01 '18 at 16:15

The web browser's or web server's cache is the reason for what is happening, You can use a string after your css file like this and after every change, you can change the version and it will work.

    <link rel="stylesheet" href="../style/index.css?ver=1.0.0">

Please note that the query string (the portion of the uri after ?) can be anything, as long as it is a valid query string and different each time you make a change.

score 0 · Answer 3 · answered Nov 01 '18 at 16:14

One trick that is useful to know about is the "disable cache" browser function. As it sound, it disable caching while DevTools is open.

More information here : https://stackoverflow.com/a/7000899/4614064

Also, if you use Webpack or Gulp, you can use hashing to output a different filename so the browser has to reload it properly. In development, "disable cache" within the browser should be enough.

why i have to rename the css file so that it can be work, is there something wrong?

3 Answers3