【问题标题】:Package for bootstrap 4 sass?引导程序 4 sass 的软件包?
【发布时间】:2019-12-01 22:50:39
【问题描述】:

我曾经在带有 Nuget 包管理器的标准 .net Web 表单应用程序中部署 Bootstrap.SASS(带有 SASS 的引导程序 4)。如果尝试在 Visual Studio 中使用 .net 核心 Web 应用程序,则不会将任何内容添加到 fie 系统或我的项目中(内容目录中没有任何内容。没有 sass 或 scss 文件。)

LibMan 似乎没有任何包含 SASS 内容的 bootstrap 4 包。如何在我的项目中最好地将 Bootstrap SASS 与 Visual Studio 2019 集成?

【问题讨论】:

    标签: bootstrap-4 nuget libman


    【解决方案1】:

    我发现我可以将 LibMan 与 unpkg 提供程序一起使用。 unpkg 上的 bootstrap 包有 sass。

    诀窍是,如果我使用在项目节点(右键单击)-> 添加-> 客户端库下访问的 GUI 工具,我无法让带有 unpkg 的 LibMan 工作。相反,我必须编辑 LibMan.json 文件并手动添加包,然后才能安装。

    //https://docs.microsoft.com/en-us/aspnet/core/client-side/libman/?view=aspnetcore-2.2
    {
      "version": "1.0",
      "defaultProvider": "cdnjs",
      "libraries": [
        ...
        {
          "provider": "unpkg",
          "library": "bootstrap@4.3.1",
          "destination": "wwwroot/lib/bootstrap/"
        },
        ...
      ]
    }
    

    【讨论】:

      【解决方案2】:

      考虑到没有其他人尝试过回答,我会编一个,但请记住,我不是前端 Web 开发人员。

      带有 content 文件的 NuGet 包不支持使用 PackageReference 的项目。 SDK 样式项目仅支持 PackageReference,从不支持 packages.config,并且 .NET Core 项目仅使用 SDK 样式项目构建。因此content 文件不适用于 .NET Core 项目,包括 ASP.NET Core。 NuGet 为 PackageReference 引入了一个新的 contentFiles 文件夹,但它的工作方式与 content 不同,我想它不能像您将 SASS 编译为 CSS 所需的那样工作。

      鉴于浏览器不直接支持 SASS,这意味着您必须有一些东西可以将 scss 文件编译/转换为 css,这可能是通过 npm 安装的工具。鉴于 Bootstrap 是通过 npm 分发的,看来您也可以通过 npm 获得 bootstrap sass 的成本较低。 Bootstrap's download web page

      Bootstrap 的 package.json 在以下键下包含一些额外的元数据:

      • sass - Bootstrap 的主要 Sass 源文件的路径
      • style - 使用默认设置预编译的 Bootstrap 非缩小 CSS 的路径(无自定义)

      这对我来说毫无意义,但猜测也许你应该安装“bootstrap@sass”或类似的东西。我相信您可以通过一些网络搜索快速找到它。话虽如此,还有“bootstrap-sass”和“bootstrap-scss”npm 包,所以也许你可以使用其中之一。

      【讨论】:

      • 感谢您的意见。 SDK风格的项目是什么意思?是的,我使用 web 编译器扩展在编译时将 sass 转换为 css。
      • 在文本编辑器中查看您的 csproj。您的旧 ASP.NET 应用程序将导入 Microsoft.Common.propsMicrosoft.CSharp.targets 并包含许多其他内容,并且冗长且难以阅读。 ASP.NET Core 项目将有 Sdk="Microsoft.NetCore.Sdk.Web"one of the other ways to use sdk,否则会更短且易于理解。
      猜你喜欢
      • 1970-01-01
      • 2015-08-27
      • 2016-05-08
      • 1970-01-01
      • 2014-03-05
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多