Question

我曾经在.NET MVC上工作。我正在尝试学习.NET Core，并希望将Bootstrap包含在SASS中。我对设置方面是完全陌生的，无法正常启动和运行。

我已经设置了.NET核心项目，并且设法通过libman安装了bootstrap 4。完成此操作后，我读到最好使用npm进行操作，但这似乎很好。所有默认设置都可以正常工作。

现在，我正在尝试进行自定义更改，这就是麻烦之处。只是为了查看是否应用了更改，我已经更改了_variables文件中的主要颜色代码，但没有任何更改。我还尝试创建一个自定义的scss文件来覆盖其他文件，但是同样，它不起作用。我确定是我做错了什么，但我不确定是什么。

我的文件结构如下所示。它是在安装引导程序4时创建的： file structure top file structure bottom 我唯一更改的是添加site.scss文件进行自定义。

_Layout.cshtml

<script type="text/javascript">
  refreshTimeFrom();
  refreshTimeTo();
  angular.element('grafana-app').injector().get('timeSrv').$rootScope.$on('refresh', function(event, data) { refreshTimeFrom(); });


  function refreshTimeFrom( )
  {
    var days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
    var ts = new Date(angular.element('grafana-app').injector().get('timeSrv').timeRange().from);
    document.getElementById("timeFrom").innerHTML = days[ts.getUTCDay() ] + " " 
                                                  + ts.getUTCDate() + "." + (ts.getUTCMonth()+1) + "." 
                                                  + ts.getUTCFullYear() + " " + ts.getUTCHours() + ":" 
                                                  + ts.getUTCMinutes() + ":" + ts.getUTCSeconds();
  }

  function refreshTimeTo( )
  {
    var days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
    var ts = new Date(angular.element('grafana-app').injector().get('timeSrv').timeRange().to);
    document.getElementById("timeTo").innerHTML = days[ts.getUTCDay() ] + " " 
                                                  + ts.getUTCDate() + "." + (ts.getUTCMonth()+1) + "." 
                                                  + ts.getUTCFullYear() + " " + ts.getUTCHours() + ":" 
                                                  + ts.getUTCMinutes() + ":" + ts.getUTCSeconds();
  }  
</script>

<font size = "3"><b> From:</b>  <span id="timeFrom" /></br></font>
<font size = "3"><b> To: </b> <span id="timeTo" /> </font>

我的自定义site.scss：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <environment include="Development">
        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
    </environment>
</head>

当我对bootstrap.css进行更改时，它们要么显示出来，要么被_reboot.scss覆盖，具体取决于它是什么。例如我可以将主体背景颜色更改为红色。

如果有人需要我添加更多信息，我很乐意这样做。

Answer 1

Libman只是静态地引入库。更改任何SCSS文件都不会导致您所引用的CSS文件被更新。为此，您需要使用诸如Webpack或Gulp之类的东西来建立SCSS的构建。

但是，如果您想实际修改SCSS，则不应依赖libman甚至npm来为您引入Bootstrap。两者都将在适当的位置更新库，从而覆盖您所做的任何更改。取而代之的是，您应该直接下载Bootstrap，或者可以通过在GitHub上创建Bootstrap项目，然后以远程方式将其包含在项目库中，以更可更新的方式将其包含在项目中。然后，您可以将更改提交到fork中，并将Bootstrap官方存储库中的更新合并到fork中。

在.NET Core中使用SASS自定义Bootstrap 4中的变量

1 个答案: