Visual studio 2015 在ASP核心项目中编译Bootstrap 4 SASS以更改基本字体大小

Visual studio 2015 在ASP核心项目中编译Bootstrap 4 SASS以更改基本字体大小,visual-studio-2015,gruntjs,asp.net-core-mvc,bootstrap-4,Visual Studio 2015,Gruntjs,Asp.net Core Mvc,Bootstrap 4,实际上,我只是想更改Bootstrap 4的基本字体大小,在我的研究之后,我发现通常的解决方案是通过它的\u custom.scss覆盖变量,我通过$font size root:14px,到目前为止还不错 现在Bootstrap4网站说我应该重新编译我的sass。。。好吧,在谷歌搜索和测试了很多教程之后,没有什么能真正让我满意。 坦率地说,我不是一个网络开发者。我来自C#,想和MVC6一起玩,现在我来了 因此,我有我的Visual Studio 2015社区版,其中包含ASP.NET核心Web

实际上,我只是想更改Bootstrap 4的基本字体大小,在我的研究之后,我发现通常的解决方案是通过它的
\u custom.scss
覆盖变量,我通过
$font size root:14px,到目前为止还不错

现在Bootstrap4网站说我应该重新编译我的sass。。。好吧,在谷歌搜索和测试了很多教程之后,没有什么能真正让我满意。 坦率地说,我不是一个网络开发者。我来自C#,想和MVC6一起玩,现在我来了

因此,我有我的Visual Studio 2015社区版,其中包含ASP.NET核心Web应用程序项目,这是Microsoft提供的原始项目模板,我只是将其更改为使用Bootstrap 4作为bower依赖项。 给我一个
wwwroot\lib\bootstrap
,带有
grunfile.js
package.json

如何用最少的工具和材料将我的
\u custom.scs
重新编译为新的
\dist\css\boostrap.css
。我的意思是,既然已经有了一个gruntfile,我觉得一切都已经存在了,我只是不知道如何执行
gruntfile.js


我用
NPM Task Runner
尝试了
Task Runner Explorer
,然后
Grunt Launcher
它们似乎都不能与嵌套的wwwroot一起工作。。。那么,有什么方法可以轻松地完成这项工作,或者说我是第一个这样做的人吗?

因此,在进行了更多的研究之后,我设法让它以艰苦的方式工作,但我想知道这是否真的是应该的方式?我确实在这里和那里找到了各种步骤,因此我不确定它们是否都是必需的,但从未接触过正在运行的构建系统;))

无论如何,这里是从我的
\u custom.scss
到一个新的
bootstrap.css
所必需的:

  • 从下载并安装Ruby

    • 下载安装程序
    • 运行安装程序时,不要忘记选中将PATH变量设置为Ruby可执行文件的选项
  • 从安装Ruby开发工具包

    • 下载与您刚安装的版本相关的归档文件(1.x.x/2.x.x,32位/64位)
    • 将归档文件解压缩到ruby安装文件夹中:
      \DevKit
    • 打开该文件夹中的控制台(cmd.exe)并执行以下操作:
      • ruby dk.rb init
      • ruby dk.rb review
      • ruby dk.rb安装
  • 然后通过以下方式在控制台中安装sass、bundler和scss lint:

    • gem安装sass
    • gem安装bundler
    • gem更新——系统和gem安装scss lint
  • 通过以下方式安装Visual Studio扩展“Grunt Launcher”:

  • 打开解决方案并编辑引导grunt文件

    • 打开
      ~\lib\bootstrap\grunfile.js
    • 在最后一个寄存器后添加询问行
      grunt.loadNpmTasks(“grunt sass”)
    • 另外,如果您使用的是默认的Bootstrap4捆绑包,有一个qunit任务会由于警告而停止Grunt,您必须添加force选项,因此您最终会得到:

      quonit:{
      选项:{
      原力:没错,
      注入:“js/tests/unit/phantom.js”
      },
      文件:“js/tests/index.html”
      },
      

  • 现在,您终于可以执行Grunt文件了:

    • 右键单击引导
      Gruntfile.js->Grunt->Grunt
    • 将输出窗口切换到
      Grunt execution
      以查看状态
    • 现在您应该有一个更新的
      bootstrap.css
      ,字体大小为14px

  • 您是否尝试过Visual Studio的Web Essentials?我将它与VS2017一起使用,并使用bootstrap 3.x sass。我所要做的就是在_bootstrap.sass上右键单击鼠标,然后选择Web编译器->编译。您必须指向新文件或使用其他机制复制到/dist


    当你说“右键单击你的引导Gruntfile.js->Grunt->Grunt”时,我到底在哪里单击它?我没有任何VS解决方案。我应该创建一个吗?如果是,我应该有什么样的项目?我有一个ASP.NET核心项目,它只是一个.json文件(至少在VS2017之前)。我想你可以创建一个空的.NET核心项目,然后做同样的事情。尽管我确信有一种方法可以在没有VS的情况下执行Grunt。所以,如果您在VS之外安装Grunt,您可以从那里执行它,但我没有这样做。我想在VS的“内部”找到一个解决方案。是的,我已经创建了一个解决方案,并向其中添加了Gruntfile.js。当我运行它时,我得到:致命错误:找不到本地grunt。如果您看到此消息,可能是找不到GrunFile,或者grunt未在您的项目本地安装。有关安装和配置grunt的更多信息,请参阅《入门指南》:我也从命令行运行了此命令:npm install-g grunt cli仍然相同。我缺少什么?grunt cli不是grunt,如果尚未安装,您还需要npm install grunt。我运行了npm install grunt,但在我运行任务时,VS中的消息仍然相同。