首页 > 解决方案 > 为什么我的汉堡包自定义设置不起作用?

问题描述

我正在通过 NPM使用来自https://jonsuh.com/hamburgers/的汉堡包 css 动画菜单图标。就像自定义部分中的说明一样,我导入了一个单独的设置文件,但仍然显示默认样式。早些时候它确实使用相同的方法工作,如何解决?

@import './hamburgers-settings';
@import '~hamburgers/dist/hamburgers.min.css';

// hamburgers-settings.scss

$hamburger-padding-x                       : 0;
$hamburger-padding-y                       : 0;
$hamburger-layer-width                     : 24px;
$hamburger-layer-height                    : 2px;
$hamburger-layer-spacing                   : 4px;
$hamburger-layer-color                     : #000;
$hamburger-layer-border-radius             : 4px;
$hamburger-hover-opacity                   : 0.7;
$hamburger-hover-transition-duration       : 0.15s;
$hamburger-hover-transition-timing-function: linear;

// To use CSS filters as the hover effect instead of opacity, 
// set $hamburger-hover-use-filter as true and 
// change the value of $hamburger-hover-filter accordingly. 
$hamburger-hover-use-filter: false;
$hamburger-hover-filter    : opacity(50%);

// Remove or comment out the hamburger types you don’t want 
// or need, so they get excluded from the compiled CSS. 
$hamburger-types: (
  arrow,
  arrow-r,
  arrowalt,
  arrowalt-r,
  arrowturn,
  arrowturn-r,
);

谢谢你。

标签: cssnpmsasssettings

解决方案


推荐阅读