CSS/SCSS 对代码的更改不适用于浏览器

Question

我试图通过修改 scss/css 来隐藏数字。就是图中的标签：poll-row__number。

奇怪的是，它不在检查器显示的 scss 文件中，而是在另一个文件中。

我正在虚拟环境中运行 Adhocracy 安装（Ubuntu Linux 上的 Nginx）。我将 css/ scss 文件中的所有 poll-row__number 引用更改为显示：无/可见性：隐藏。重新启动服务器并从浏览器中删除缓存，尝试了 Chrome、FireFox 和 Safari。但这个数字仍然可见。当我在检查器中更改它时，它就消失了。

这是我的 css 目录，其中包含文件 poll-row__number 位于 _poll.scss 中，如下所示 正如您所看到的，添加了值 display:none/visibility:hidden 。

当 grep div 时，它在系统范围内找不到任何内容。当 grep pol-row__number 时，它找到了它，但它找到的所有内容都更改为显示：无/可见性：隐藏。

我做错了什么，您还需要什么信息来帮助我解决这个奇怪的问题。

我已经尝试了所有我能想到的。

Answer 1

您向我们展示的代码并不多。所以很难发现错误。

• 尝试在控制台（网络浏览器）中添加

  display: none;

• 首先确保 scss 已转换为 css 文件：

sass --watch src/scss/_project_header.scss:src/css/_project_header.css

• 其次，验证

  .poll-row__number

  是否未在链接到您

  css

  文件的另一个

  html

  文件中使用，因为我们可以看到当前的

  display

  是

  inline-block

  。

• 然后，检查是否没有使用两次

  .poll-row__number

  ，因为基本的CSS规则如下，最后一个属性是与其他属性重叠的，例如：

CSS

.poll-row__number{
display :none;
}

.poll-row__number{
display :inline-block;
}

在那里，

.poll-row__number

将得到

inline-block

。我刚刚看到你的代码中有这个问题（或者是故意的）：

第 1 行：

.poll-row__number

（没有显示属性） 第 2 行：

.poll-row__number, .poll-row__label

（具有显示内联块）

（这是我的观点，但使用“__”作为 ids 或类是丑陋且令人困惑的。请停止它：要么使用“CamelCase”，要么只使用一个“_”）

Answer 2

感谢您的所有帮助。我找到了解决方案。也许对于很多开发者来说这是显而易见的，但我在这方面并不是专业人士。

我做了什么：

我更改了我想要更改的 css/scss 文件。 然后我进入我的虚拟环境并执行：

npm install npm run build:prod
pip install --upgrade -r requirements.txt
export DJANGO_SETTINGS_MODULE=adhocracy-plus.config.settings.build
python manage.py compilemessages
python manage.py collectstatic

我不知道它们是否都需要，但我想，也许 css/scss 已构建并存储在某个地方，然后调用，因此它会覆盖项目文件夹中的 css 文件。 之后我重新启动了我的进程：

sudo systemctl

restart Adhocracy-plus

sudo systemctl restart Adhocracy-plus.service

sudo systemctl restart Adhocracy-plus-background-task

sudo systemctl restart nginx

  

然后就成功了。

总结：

CSS/SCSS 已编译。因此更改了 CSS/SCSS，重新编译/构建项目，重新启动服务。