Django修改了css文件不生效怎么办

解决方法:1、正确配置“settings.py”文件里的“STATIC_URL”和“STATIC_ROOT”;2、执行“python manage.py collectstatic”命令;3、重启gunicorn和nginx即可。

Django修改了css文件不生效怎么办

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

将Django部署到服务器之后,每一次在本地端对网站的修改都需要在服务端进行同步,在写本文之前,我还以为只是把源码保持同步就可以了,没想到却遇到了今天的问题。

修改了main.css文件之后,然后我通过git对网站进行了同步,代码已经成功同步到了服务器上。但就是无法正常显示,经一番查找探究之后,我发现了修改css等静态文件的正确姿势…

1.配置文件

首先应该改确保你项目下的settings.py文件已经正确配置了STATIC_URL和STATIC_ROOT:

立即学习“前端免费学习笔记(深入)”;

STATIC_URL = '/static/'STATIC_ROOT = os.path.join(BASE_DIR,'static/')

请注意引号里面的”/”,多一个或者少一个/”,都会使你的修改无法生效,我就是因为这里多了一个”/”,翻了车。那这两个参数具体是什么意思呢?

STATIC_ROOT是一个绝对地址,它是在Django部署的时候才会用到,它所对应的文件夹是存放被从项目各个地方收集来的静态文件,因为一个Django可能有多个APP,相应的,每个APP可能都会有自己的static文件,将各个APP中的静态文件收集到一起是为了nginx统一使用。那这些文件是由谁来收集的呢?这个问题会在第二步的时候说到。

STATIC_URL的作用就是为了能够浏览器访问到你的静态文件,起到了一个映射的作用。一般默认设置为”/static/”

2.收集文件

本地css文件同步到服务器之后,只是同步到了对应APP下面的static文件夹里面,但是nginx等调用的是你设置的STATIC_ROOT文件夹下的文件,所以代码同步之后我们要进行这个非常重要的操作:

python manage.py collectstatic

运行完这条代码之后,刚刚修改的main.css文件将会被收集到网站根目录下的static文件中,等待nginx的调用。

3.重启服务

前两步做完之后,你还需要重启一下gunicorn和nginx,不过我没有重启也生效了,如果没有生效的话建议执行此步骤。

# 查看gunicorn进程IDpstree -ap | grep gunicorn# 重启进程kill -HUP ID

推荐学习:css视频教程

以上就是Django修改了css文件不生效怎么办的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1620212.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月24日 07:03:03
下一篇 2025年12月24日 07:03:16

相关推荐

  • css如何从png里截取小图标

    css从png里截取小图标的方法:首先使用background属性引入png图片,使用no-repeat属性值设置图片不重复;然后使用background-position属性设置图像初始位置,进行精确定位。 本教程操作环境:windows7系统、CSS3&&HTML5版、Dell …

    2025年12月24日
    000
  • 纯CSS如何绘制双箭头(代码示例)

    本篇文章给大家介绍一下使用纯css绘制双箭头效果的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 (学习视频分享:css视频教程) 一、多次调用单箭头 实现了单箭头~~就很容易实现双箭头了,上文已经介绍2种实现单箭头的原理: 边框旋转方式、双三角覆盖方式。这次以边框旋转为例多…

    2025年12月24日 好文分享
    000
  • css怎么让滚动条隐藏

    方法:1、使用“overflow-y:scroll”语句;2、使用“overflow-x:hidden;overflow-y:auto;”语句;3、使用“margin-right:-15px;margin-bottom:-15px;”语句。 本教程操作环境:windows7系统、CSS3&&…

    2025年12月24日
    000
  • css如何设置table边框的颜色

    css设置table边框的颜色的方法是,给table边框添加border-color属性,并且设置属性值为需要的颜色即可,例如【border-color:#ff0000 #0000ff;】。 本文操作环境:windows10系统、css 3、thinkpad t480电脑。 要设置table边框的颜…

    2025年12月24日
    000
  • css怎么设置边框阴影效果

    在css中,可以使用box-shadow属性来给边框添加一个或多个阴影,设置边框阴影效果,语法格式为“box-shadow:横向阴影 纵向阴影 模糊半径 扩展半径 阴影颜色 inset”;inset值用于将外阴影改为内侧阴影,可以省略。 本教程操作环境:windows7系统、CSS3&&am…

    2025年12月24日
    000
  • css如何关闭浮动

    css关闭浮动的方法是,给元素添加clear属性,并且设置属性值为none即可,例如【clear:both;】。clear属性规定了元素的某侧不允许其他浮动元素。 本文操作环境:windows10系统、css 3、thinkpad t480电脑。 css中有一个属性clear,该属性规定了元素的哪一…

    2025年12月24日
    000
  • css如何取消链接下划线

    css取消链接下划线的方法是,给链接文本添加text-decoration属性,并且设置属性值为none就可以了,例如【h3 {text-decoration:none;}】。 本文操作环境:windows10系统、css 3、thinkpad t480电脑。 css中提供了一个专门用来设置文本修饰…

    2025年12月24日
    000
  • css如何清除背景颜色

    css清除背景颜色的方法是,给背景添加background-color属性,并将属性值设置为transparent,这样背景颜色就被清除了,如【background-color: transparent】。 本文操作环境:windows10系统、css 3、thinkpad t480电脑。 如果我们…

    2025年12月24日
    000
  • css怎么设置文本内容居中

    css设置文本内容居中的方法是,给文本元素添加text-align属性,并且将属性值设置为center即可,例如【h1 {text-align: center}】,表示把标题的水平对齐方式设置为居中。 本文操作环境:windows10系统、css 3、thinkpad t480电脑。 text-al…

    2025年12月24日
    000
  • css该如何隐藏文本框

    css隐藏文本框的方法是,给文本框添加display属性,并设置属性值为none就可以了。display属性用来规定元素应该生成的框的类型。 本文操作环境:windows10系统、css 3、thinkpad t480电脑。 我们只需要输入 代码,通过style=”display:non…

    2025年12月24日
    000
  • css中字间距怎么调整

    css中调整字间距的方法是,使用letter-spacing属性调整,如【letter-spacing:6px】。letter-spacing属性可以增加或减少字符间的空白。 本文操作环境:windows10系统、css 3、thinkpad t480电脑。 css中专门为我们提供了一个属性lett…

    2025年12月24日
    000
  • css怎么把div设置成圆角

    css把div设置成圆角的方法是,为div设置border-radius属性,如【border-radius:5px】。border-radius属性是一个复合属性,这个属性允许我们为元素添加圆角边框。 本文操作环境:windows10系统、css 3、thinkpad t480电脑。 我们可以通过…

    2025年12月24日 好文分享
    000
  • css中的透明度该怎么设置

    css中透明度的设置方法是为元素添加opacity属性,例如【opacity:0.5;】。opacity属性设置了一个元素的透明度级别,透明度会把所有内容和元素都设置为透明。 本文操作环境:windows10系统、css 3、thinkpad t480电脑。 我们通常有两种方式来设置透明度,具体内容…

    2025年12月24日
    000
  • css怎么实现内容超出隐藏效果

    css实现内容超出隐藏效果的方法是,给文本内容添加text-overflow属性,例如【text-overflow:ellipsis】。text-overflow属性指定当文本溢出包含它的元素应该发生什么。 本文操作环境:windows10系统、css 3、thinkpad t480电脑。 css为…

    2025年12月24日
    000
  • css怎么隐藏按钮

    css隐藏按钮的方法是,给按钮添加display属性,例如【style=”display:none;”】。display属性规定元素应该生成的框的类型,none表示元素不被显示。 本文操作环境:windows10系统、css 3、thinkpad t480电脑。 如果我们要实…

    2025年12月24日
    000
  • css怎么设置按钮边框的颜色

    css设置按钮边框颜色的方法是,为按钮边框添加border-color属性,例如【border-color:#0000ff;】。border-color属性用来设置一个元素的四个边框颜色。 本文操作环境:windows10系统、css 3、thinkpad t480电脑。 css中为我们提供了一个非…

    2025年12月24日
    000
  • zoom在css中什么意思

    zoom是css中的一个属性,有“缩放”的意思,用于设置或检索对象的缩放比例,可以让网页实现IE7中的放大缩小功能。zoom是IE浏览器的专有CSS属性,Firefox等浏览器不支持。 本教程操作环境:windows7系统、CSS3版、Dell G3电脑。 zoom属性是IE浏览器的专有属性,Fir…

    2025年12月24日
    000
  • CSS怎么禁止换行

    CSS中可使用white-space属性来禁止换行,只需要给元素设置“white-space: nowrap;”样式即可。white-space属性设置如何处理元素内的空白,当值为“nowrap”时表示文本不会换行,文本会在在同一行上显示。 本教程操作环境:windows7系统、CSS3&&…

    2025年12月24日
    000
  • css如何实现按钮透明

    在css中,可以使用opacity属性设置按钮透明,语法“opacity:数值”,其中数值范围在“0.0-1.0”之间;当数值为1时表示完全不透明,当数值为0.5时表示半透明,当数值为0时表示完全透明。 本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电…

    2025年12月24日
    000
  • css中行间距怎么设置

    在css中,可以通过行高属性line-height来设置行间距,语法格式“line-height:间距值;”。Line-height属性的值可以是相对数值,也可以为绝对数值或者具体的数字;line-height的值越大,那么行间距就越高。 本教程操作环境:windows7系统、CSS3&&a…

    2025年12月24日
    000

发表回复

登录后才能评论
关注微信