如何将 Bootstrap SASS/SCSS 设置为 Visual Studio 2013？

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 文件，它不会 generate/compile CSS。

打开新的 bootstrap.scss 文件并清除所有默认代码。

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

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

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

由于您现在重新生成了与原始文件相同的文件，您的捆绑包将正常工作，网站将像以前一样出现。

哦，要编辑您的变量，例如字体，请参阅：

\Content\bootstrap\_variables.scss

Answer 2

以下是 ASP.NET Core 2.0 MVC 在 Visual Studio 2017 中的步骤。

运行 dotnet new mvc
运行 git clone https://github.com/twbs/bootstrap-sass
清除 wwwroot\lib\bootstrap\dist\js\bootstrap.min.js
将 wwwroot\lib\bootstrap\dist\js\bootstrap.js 的内容替换为 GitHub\bootstrap-sass\assets\javascripts\bootstrap.js
在 VS 解决方案资源管理器中，新建文件夹 wwwroot\lib\bootstrap\dist\js\bootstrap，然后将 GitHub\bootstrap-sass\assets\javascripts\bootstrap 中的 .js 个文件复制到其中。
复制GitHub\bootstrap-sass\assets\stylesheets\_bootstrap.scss到wwwroot\lib\bootstrap\dist\css
复制（拖放）整个文件夹 GitHub\bootstrap-sass\assets\stylesheets\bootstrap 到 wwwroot\lib\bootstrap\dist\css
你需要编译 SASS 所以你有两个选择，第一个是假设你正在使用完整的 Visual Studio IDE 来处理你的项目，而第二个选项是允许 Visual Studio 和 VSCode。您还需要考虑 CICD 管道的情况。
我认为 VSCode 和 CICD 设置需要在 IDE 跨 VS 中使用任务运行器，VSCode 可能还需要一个构建步骤。
安装 SASS 编译器涉及 Ruby on Windows 并且似乎 "get complex"；我不是一个 front-end/JavaScript 人，也不是 Linux 爱好者，我更喜欢生产力而不是花哨的时尚 JavaScript 工具，所以我打算避开 VSCode 支持并安装 Web 编译器来自 Mads Kristensen 的 VS 扩展挂钩到 MSBuild，因此我认为在 VSCode 以及 CICD 中工作时它应该对 dotnet 构建有好处。
安装网络编译器（https://marketplace.visualstudio.com/items?itemName=MadsKristensen.WebCompiler）。
右键单击wwwroot\lib\bootstrap\dist\css\_bootstrap.scss并选择Web编译器>编译文件-注意任务运行ner Explorer中Scss节点的外观和新的compilerconfig.json 文件已添加到您的代码库。
查看编译文件；配置 Git 忽略缩小版本。
更改 _Layout.cshtml 中的条件代码以指向生产中的缩小 _bootstrap.min.css 而不是 CDN link.
运行应用程序和完整性检查，在自托管控制台中查找对 _bootstrap.css 文件的请求和 200 OK returns.
基本上就是这样。
提交 Git 并开始更改 _variables.scss 等

Answer 3

以下是使用 ASP.NET MVC 安装 Bootstrap 4.x 和 Visual Studio 2018 的步骤。我假设您已经更新了 Bootstrap如 .

中所述，NuGet 打包并安装了最新版本的 Web Essentials

Download Bootstrap 并解压源文件
从您的 /Content 目录中删除 ALL Bootstrap CSS 个文件
将 scss 文件夹移至项目的“/Content”文件夹
（可选）将 /scss 重命名为 /bootstrap
编译bootstrap.scss
打开AppStart/BundleCongig.cs
更改 ~/Content/bootstrap.css 以匹配您的 Bootstrap 文件的路径

Answer 4

这是我在 Visual Studio 2017 年 [2019 年 7 月在这里] 所做的；

我直接从 nuget.org 服务器安装了 "The Bootstrap Authors, Twitter Inc." 版本的 bootstrap.sass (v4.3.1)。然后我四处寻找关于我想要 'compile' 从 .scss 到 .css 的确切文件的信息，最后找到了这个 post。

@SandroPaetzold 的回答似乎有点..过度/有点令人困惑 [考虑到使用 NuGet 安装包要容易得多]，所以我决定写下我的过程，以防它帮助任何想要使用SASS 版本 Bootstrap 4 在他们的 ASP.Net MVC project/solution.

我只使用 Mads K 的 WebCompiler，所以我必须创建 compilerconfig.json 文件 [WebCompiler 工具需要]。为此，我能够从我刚刚完成的另一个项目中复制它，然后进行 bootstrap 所需的更改，即简单地将 bootstrap.scss 文件编译到我的 ~/Content 文件夹中。这样，我就不必触摸 BundleConfig.cs 文件了。

（现在，诚然，如果我要拥有的不只是 2-3 个 .css 文件，我会像处理其他文件一样将它们放入 ~/Content/css 之类的文件中我提到的项目，但我觉得在这种情况下这不是必要的步骤。）

所以，我的整个 compilerconfig.json 就是：

[
  {
    "outputFile": "Content/bootstrap.css",
    "inputFile": "Content/bootstrap/bootstrap.scss",
    "options": {
      "sourceMap": true
    }
  }
]

此时，我进入Task Runner Explorer，right-clicked on Content/bootstrap/bootstrap.scss（在left-hand-pane内），然后选择Before Build 来自 Bindings 上下文菜单。

最后，由于它们正在构建中，因此实际上不需要签入，我将 Content/*.css 添加到我的 .gitignore 文件中。（注意：您的路径可能会有所不同。）

在我看来，这是完成此过程的最少流失量，至少与其他答案相比是这样。（承认一些（如果不是全部）这些答案正在处理 other/earlier 版本的 Bootstrap，因此可能需要一些额外的工作。）

如何将 Bootstrap SASS/SCSS 设置为 Visual Studio 2013？

How do I setup Bootstrap SASS/SCSS with Visual Studio 2013?

sass

twitter-bootstrap

visual-studio-2013