Why my compiled css file's changes not shown on my browser? - css

Question

My compiled CSS file is hosted locally via Centos5 / Docker on my Mac. And my Less and Css files are on assets/css/ folder.
Once I create less file and first compiled file shown perfectly.
But after I edit less file and compile or edit CSS file, my Chrome does not show my CSS file perfectly.
I trashed Chrome's cache file and opened by another browser (Chromium, Canary, Safari), there was no change.
I tried to serve this on PHP builtin Server on MACOS, it works normally. Think that Docker or CentOS's HTTP server is problem.
You can see actual codes and browser output codes...
Less Codes
#blue: #01569C;
#yellow: #FFE215;
#darkblue: #1A2450;
#socialicon: #54b2df;
#import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);
body,div,nav,a,p,input {
font-family: 'Noto Sans KR', sans-serif;
color: #blue;
}
body {
background-color: white;
}
// Override Container
.container {
width: 100%;
margin: 0;
padding: 0;
#media (min-width: 1200px){
width: 1200px;
margin: 0 auto;
}
#media (max-width: 1199px){
width: 100%;
}
}
.navbar {
// width: 1200px;
margin: 0 auto;
background-color: white;
color: #blue;
}
.intro-video-container {
max-width: 854px;
margin: 0 auto;
#media(max-width:853px) {
width: 80%;
}
}
.intro {
// width: 1400px;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
* { margin: 0 auto; }
img {
display: block;
margin: 0 auto;
#media (max-width: 1000px) {
width: 100%;
}
}
}
.umr-intro-video {
margin: 10% auto;
}
.btn-social {
color: #socialicon;
}
.bgcircle {
background: #blue url('/assets/images/umr_teaser_2_bg.png') repeat-x top center;
}
.bggraph {
// padding-bottom: 124px;
background: #darkblue url('/assets/images/umr_teaser_5_bg.png') repeat-x bottom center;
}
.bgblue {
background-color: #blue;
}
.bgdarkblue {
background-color: #darkblue;
}
.bgyellow {
background-color: #yellow;
}
.bgwhite {
background-color: white;
}
Compiled CSS Codes
#import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);body,div,nav,a,p,input{font-family:'Noto Sans KR',sans-serif;color:#01569C}body{background-color:white}.container{width:100%;margin:0;padding:0}#media (min-width:1200px){.container{width:1200px;margin:0 auto}}#media (max-width:1199px){.container{width:100%}}.navbar{margin:0 auto;background-color:white;color:#01569C}.intro-video-container{max-width:854px;margin:0 auto}#media (max-width:853px){.intro-video-container{width:80%}}.intro{width:100%;margin:0;padding:0;overflow:hidden}.intro *{margin:0 auto}.intro img{display:block;margin:0 auto}#media (max-width:1000px){.intro img{width:100%}}.umr-intro-video{margin:10% auto}.btn-social{color:#54b2df}.bgcircle{background:#01569C url('/assets/images/umr_teaser_2_bg.png') repeat-x top center}.bggraph{background:#1A2450 url('/assets/images/umr_teaser_5_bg.png') repeat-x bottom center}.bgblue{background-color:#01569C}.bgdarkblue{background-color:#1A2450}.bgyellow{background-color:#FFE215}.bgwhite{background-color:white}
Browser Output
#import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);
body,
div,
nav,
a,
p,
input {
font-family: 'Noto Sans KR', sans-serif;
}
body a,
div a,
nav a,
a a,
p a,
input a,
body a:visited,
div a:visited,
nav a:visited,
a a:visited,
p a:visited,
input a:visited,
body a:active,
div a:active,
nav a:active,
a a:active,
p a:active,
input a:active,
body a:hover,
div a:hover,
nav a:hover,
a a:hover,
p a:hover,
input a:hover {
color: #01569C;
}
body {
background-color: #01569C;
}
.container {
width: 100%;
margin: 0;
padding: 0;
}
#media (min-width: 1200px) {
.container {
width: 1200px;
margin: 0 auto;
}
}
#media (min-width: 768px) {
.container {
width: 100%;
}
}
.navbar {
margin: 0 auto;
background-color: white;
color: #01569C;
}
.intro-video-container {
max-width: 854px;
margin: 0 auto;
}
#media (max-width: 853px) {
.intro-video-container {
width: 80%;
}
}
.intro {
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.intro * {
margin: 0 auto;
}
.intro img {
As you see, browser output is broken and shows previous saved version.
Where should I find the reason?

Answer 1

Without more detail it is isn't possible to definately answer your question.
There are a number of possible scenarios, that the server you're working on has caching enabled, in which case you have to work out a strategy for cache busting.
Here's a good article on the subject:
CSS Tricks: Strategies For Cache Busting
Or it could be that your code is not deploying to server when uploading.
If your project is currently in active development, I would recommend that you look into setting up a local development environment, either by configuring a LAMP stack on your development machine, OR using one of the free Software packages like XAMPP or MAMP, once your project is ready for development then deploy it to your server.

Answer 2

(Posted on behalf of the OP).
I stopped using CentOS on Docker and installed Ubuntu 14 on Docker. And configured same setting and it worked.