我可以覆盖 Prestashop 中的 scss 样式吗？

Question

我在 Prestashop 1.6 中使用默认主题，但遇到问题。我想要完成的是将导航栏简单地移动 25px。我知道我需要删除或更改

#block_top_menu {
padding-top: 25px;
}

in blocktopmenu.scss，它不在模块目录中，而是在主题目录中，我认为它应该覆盖默认样式。当我在浏览器检查器工具中禁用它时，它会完全按照我想要的方式更改，但显然不会保存。

我编辑了文件，将 25px 更改为 0px。当我重新加载页面时，没有任何变化，检查器仍然显示代码，就好像我从未修改过它一样。所以我编辑了模块类别中的 blocktopmenu.css，添加了 !important，如下所示：

#block_top_menu {
padding-top: 0px !important;
}

希望覆盖 scss。仍然没有发生任何变化。无奈之下，我从服务器上删除了scss文件。仍然没有变化，检查器显示的文件就好像它在那里一样。

我没主意了。我应该以某种方式清除 prestashop 的缓存还是什么？请帮忙

编辑： 我清除了缓存。没有变化。

Answer 1

您将此代码添加到块顶部 menu.scss 文件中，但使用包装器 class 作为特定 ID，例如：-

  $block-top-menu{padding-bottom:25px!important;}
  div.[your wrapper id which wrapes the element]#block_top_menu{padding-bottom:$block-top-menu;}

它只覆盖特定位置而不是整个 scss。

Answer 2

您需要处理 SCSS 以创建一个 CSS 文件...（浏览器只读取 CSS）

据说 Prestashop 导入了许多 CSS 文件，主要的是 global.css，然后大多数模块都有特定的样式表，
如果您使用开发工具，您可以轻松查看设置内容边距和你必须修改的内容，通常块顶部菜单有一个名为 superfish-modified.css;

的 css 文件

还要注意 PS 有一个内置的缓存系统...

Answer 3

文件default-bootstrap/sass/modules/blocktopmenu/css/blocktopmenu.scss 编译成 default-bootstrap/css/modules/blocktopmenu/css/blocktopmenu.css

如果您找到了.scss文件，那么一定也存在相应的.css文件。

现在大多数用户只是直接修改 .css 文件并没有什么问题，但是如果你正在做很多样式更改（比如更改整个网站的配色方案），那么更改可能会更好.scss 文件并将它们编译成 .css。如果您在 .scss 中更改主题变量，它将在所有使用过的地方更改。这样你只需要编辑一个地方而不是X个地方。

要使用 .scss，您需要两个工具：sass 和 compass。您需要 google 适用于您的操作系统的安装说明。

在您的系统上安装这些工具后，您需要在主题文件夹中的控制台中运行一个命令（因为不同的主题=不同的风格）：

/var/www/themes/theme1/ > compass build

运行ning compass build in the theme folder 将 .scss 文件编译成 .css 并放置在 css folder (of the theme).

我可以覆盖 Prestashop 中的 scss 样式吗？

Can I override a scss style in Prestashop?

css

sass

prestashop