您必须在凉亭中维护一个包

Question

我使用Bower安装了Foundation SASS。然后我导入了基础并通过main.scss上的以下命令对其进行了初始化：

@import "../vendor/foundation-sites/scss/foundation.scss";
@include foundation-everything(true); // Init the foundation

问题在于，有一个设置文件_settings.scss，即需要覆盖的foundation.scss导入。由于我不应该触及Bower目录vendor/内的文件，因此我需要在main.scss上进行更改。不，_settings.scss没有使用!default功能。设置如何定义的片段如下：

$global-font-size: 100%;
$global-width: rem-calc(1200);
$global-lineheight: 1.5;

有没有什么方法可以在include之前定义一个变量，以便它不会被覆盖？像...这样的东西。

$global-font-size: 16px !important;
$global-width: 1000px !important;
$global-lineheight: 1 !important;    
@import "../vendor/foundation-sites/scss/foundation.scss";
@include foundation-everything(true); // Init the foundation

Answer 1

两种情况，双向：

您必须在凉亭中维护一个包

我会使用symbolic link来简化事情。看看我的项目文件。

我已经用凉亭安装了基础：

bower_component/foundation/scss/{...whatever}.scss

然后我会创建一个符号链接到.bower_component / foundation / scss文件夹。

src/scss/foundation        # this is a symbolic link to -> ./bower_component/foundation/scss

我从bower_component复制我想要自定义的文件。

src/scss/my_settings.scss  # copied from foundation/scss folder

我加上自己的scss。

src/scss/main.scss

将所有我的自定义和foundation.scss一起导入

@import 'my_settings' ;
@import '...other_customization...'
@import 'foundation/foundation' ;

然后构建src/scss/main.scss，一切正常。

然后你可以毫不费力地保持凉亭的基础版本。无论bower_components/foundation中有什么变化，只要确保文件夹名称和相对路径是正确的，一切都会好的。

嗯，版本不是那么重要。

问自己一个问题。凉亭维护基础对您有什么好处？如果你没有充分的理由，你可以从bower_component文件夹移出基础并进行任何你想要的改变。

Bower并没有为用户规定自己的构建系统，也没有规定开发人员一种包含库的方法（AMD，CommonJS等）全部 Bower确实安装了正确版本的软件包项目需求及其依赖性。换句话说：它下载正确库的源文件及其所需的一切特殊文件夹。 其他一切都取决于开发者。引自：Artem Sapegin

如何防止在Foundation中覆盖SASS变量？

1 个答案:

您必须在凉亭中维护一个包

嗯，版本不是那么重要。