Question

我编译的CSS文件在我的Mac上通过Centos5 / Docker本地托管。我的Less和Css文件位于assets / css /文件夹中。

一旦我创建了较少的文件和第一个完整的编译文件。

但是在我编辑较少的文件并编译或编辑CSS文件后，我的Chrome无法完美显示我的CSS文件。

我删除了Chrome的缓存文件，并由其他浏览器（Chromium，Canary，Safari）打开，没有任何变化。

我尝试在MACOS上的PHP内置服务器上提供服务，它正常工作。认为Docker或CentOS的HTTP服务器有问题。

您可以看到实际代码和浏览器输出代码......

少代码

@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;
}

编译的CSS代码

@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}

浏览器输出

@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 {

如您所见，浏览器输出已断开并显示以前保存的版本。

我应该在哪里找到原因？

Answer 1

如果没有更多细节，我们无法肯定地回答您的问题。有许多可能的情况，您正在处理的服务器已启用缓存，在这种情况下，您必须制定缓存清除策略。这是一篇关于这个主题的好文章： CSS Tricks: Strategies For Cache Busting

或者可能是您的代码在上传时没有部署到服务器。

如果您的项目当前处于活动开发阶段，我建议您考虑通过在开发计算机上配置LAMP堆栈或使用XAMPP或MAMP等免费软件包之一来设置本地开发环境，一旦您的项目准备好开发，然后将其部署到您的服务器。

Answer 2

（代表OP发布）。

我停止在Docker上使用CentOS并在Docker上安装了Ubuntu 14。并配置相同的设置，它工作。

为什么我编译的css文件的更改没有显示在我的浏览器上？

2 个答案: