Magento 1.9 中的 sass 到 css答案

【问题标题】：sass to css in Magento 1.9Magento 1.9 中的 sass 到 css
【发布时间】：2019-03-03 22:10:48
【问题描述】：

我正在使用 Magento 1.9，我正在尝试编辑 megamenu 的背景颜色。

我一直导航到 .scss 文件，但在颜色十六进制的位置找到了一个 $menu-background..

 .main-menu {
    position: relative;
    top: 0;
    width: 100%;
    left: 0;
    z-index: 99;
    background-color: $menu-background;

    &.isStuck {
      z-index: 9990;

      .nav .grid-full > li > a > span{
        margin: 10px 30px;
      }
      .nav .grid-full > .parent > a > span:after{
        top: 80%;
      }
    }
    }

在同一个scss文件的开头有

@import "../includes";

于是我搜索了那个文件，发现：

@import "var";

在我找到的最后一个文件中：

// Accent Colors
$accent-color-1: #ee372a;
$accent-color-2: #000;
$accent-color-3: #fff;

//Menu
$menu-background: $accent-color-2;
$menu-item-color: #888888;
$menu-item-color-act: #ffffff;
$menu-item-bg-act: #232323;

我将强调色 2 编辑如下：（蓝色而不是黑色）

$accent-color-2: #00427A;

但是现在无论我刷新多少页面，按 CTRL + F5，从 magento 刷新缓存 -> 系统缓存管理。我看不到颜色变为蓝色。我搜索了很多，但找不到解决方案。

然后我意识到我编辑的文件是scss文件而不是css（我对scss文件的了解很少）。

现在最大的问题是将编辑后的 scss 文件转换为 css 文件。我试过了： -侦察 -考拉 -npm 萨斯

在所有情况下，@import 都失败了，css 搞砸了。

是否有一个按钮可以在 magento 中轻松地将 sass 编译为 css，或者在找到 @import 时不会弄乱 css 的其他方式？

【问题讨论】：

标签： css magento sass magento-1.9

【解决方案1】：

Magento 1 没有内置的 scss 编译器。您必须手动编译它们或检查您的主题是否有一些用于此任务的内置模块。

你可以从 npm 获取编译器

npm install -g sass

或获得独立的 https://github.com/sass/dart-sass/releases

编译过程很简单。只需找到源 scss 并指定目标文件

sass source/<file>.scss skin/frontend/<theme-name>/default/css/<file>.css

【讨论】：