如何使用VisualStudio2013设置BootstrapSASS/SCSS？

Bootstrap已经使用默认模板中的新ASP.NET项目进行设置,但我想使用SASS版本的Bootstrap,以便我可以自定义它,例如更改字体变量.

我该如何设置？我需要一样的工具npm,Bower和Grunt？我有点迷茫.

这实际上非常简单,只要你运行Visual Studio 2013 Update 2+并且(我认为它需要,不确定)Mads Kristensen的精湛Web Essentials插件.

首先,更新您的Bootstrap NuGet包,使其尽可能匹配官方Twitter Bootstrap SASS端口上的可用版本(它们最初将其写入LESS并移植到SASS).

在撰写本文时,NuGet在3.3.2上,而SASS端口在3.3.3上,尽管tarball说不然.

这是GitHub上的SASS端口:

https://github.com/twbs/bootstrap-sass

然后从您的项目中删除以下文件:

\Content\bootstrap.css

\Content\bootstrap.min.css

然后从上面的GitHub下载"tar ball"拉链并将其解压缩到某处.您只需要SCSS文件,因此请打开以下文件夹:

bootstrap-sass-3.3.2.tar\bootstrap-sass-3.3.2\bootstrap-sass-3.3.2\assets\stylesheets

复制bootstrap子文件夹并将其粘贴到项目\Content文件夹中.

现在,\Content在Visual Studio中向文件夹中添加一个新项,然后选择"SCSS样式表(SASS)"并调用它bootstrap.scss

添加新项目非常重要,因为它启用了自动生成功能,如果您只是添加现有.scss文件,则不会生成/编译CSS.

打开新bootstrap.scss文件并清除任何默认代码.

现在返回到解压缩文件夹并_bootstrap.scss在记事本中打开文件,然后复制内容并将其粘贴到bootstrap.scssVisual Studio中的文件中.

保存文件,它将编译bootstrap.css!它还将生成.map编辑器(如Chrome的浏览器开发工具)使用的文件,将gen'ed CSS映射回原始的SASSy标记.聪明.

右键单击该.css文件以缩小它,然后选择自动缩小更改的选项.

由于您现在已经重新生成了与原来相同的文件,因此您的捆绑包将正常运行,并且该站点将像以前一样出现.

哦,要编辑变量,比如字体,请参阅:

\Content\bootstrap\_variables.scss