twitter-bootstrap - 如何使用 Visual Studio 2013 设置 Bootstrap SASS/SCSS？

Question

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

我该如何设置？我需要像 npm 这样的工具吗？ , Bower和 Grunt ?我有点失落。

Answer 1

这实际上非常简单，只要您运行 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”zip 并将其解压到某个地方。您只需要 SCSS 文件，因此打开以下文件夹:
bootstrap-sass-3.3.2.tar\bootstrap-sass-3.3.2\bootstrap-sass-3.3.2\assets\stylesheets
复制 bootstrap 子文件夹并将其粘贴到您的项目 \Content 文件夹中。

现在，在 Visual Studio 中的 \Content 文件夹中添加一个新项目，然后选择“SCSS Style Sheet (SASS)”并将其命名为 bootstrap.scss
添加一个新项目很重要，因为它启用了自动生成的东西，如果你只是添加一个现有的 .scss 文件，它不会生成/编译 CSS。

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

现在回到解压后的文件夹并在记事本中打开 _bootstrap.scss 文件，然后复制内容并将它们粘贴到 Visual Studio 中的 bootstrap.scss 文件中。

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

右键单击 .css 文件以缩小它，然后选择在更改时自动缩小的选项。

由于您现在重新生成了与原来相同的文件，因此您的捆绑包将正常工作，并且该站点将像以前一样出现。

哦，要编辑你的变量，比如字体，请参阅:
\Content\bootstrap\_variables.scss