无法在ASP.NET MVC应用程序中将SASS样式应用于我的视图？

编程问答 2022-06-05

问题描述

我对样式有疑问，我已经创建了一些简单的样式（scss文件）：

body {
    background: red;
}
.mobile-app {
    background: red;
}

我已经创建了我的第一个视图：

@model AppLearn.viewmodels.BooksListviewmodel

<!DOCTYPE html>

<html>
    <head runat="server">
        <Meta name="viewport" content="width=device-width" />
        <title>CRUD For Learning Purposes Only</title>
        <link href="~/content/styles.css" rel="stylesheet" type="text/css" media="screen" runat="server" />
    </head>
    <body>
        <div class="mobile-app">
            @foreach (var book in Model.Books)
            {
                <div class="book-card">
                    <div class="book-card__image"></div>
                    <div class="book-card__title">
                        <h1>@book.bookName</h1>
                    </div>
                    <div class="book-card__actions"></div>
                </div>
            }
            
        </div>
    </body>
</html>

它不起作用！

我根据已经在堆栈中找到的响应添加了runat="server"，该响应已解决其他人的问题，但没有得到解决。

有什么想法吗？任何帮助将不胜感激。

解决方法

使用Visual Studio编译sass的最简单方法是通过WebCompiler扩展名。

从VS Marketplace下载并安装。

现在，在安装扩展并重新启动Visual Studio之后，您必须选择：

  1. 您可以通过添加的上下文菜单选项（右键单击文件）手动编译文件：

  2. 或者只是让扩展在保存时处理编译： 首次编译sass文件时，扩展名将创建一个compilerconfig.json文件，该文件将存储您的输入和输出文件，如下所示：

    [
  {
    "outputFile": "wwwroot/css/app.css","inputFile": "wwwroot/sass/main.scss"
  }
]

现在，扩展程序将开始监视inputFile的更改，一旦保存更改，它将编译并输出到outputFile路径。

您可以编辑输入和输出路径以匹配您希望将输出文件存储的位置。

有关更复杂的情况，请参见MSDN for bundling and minification。它是在Visual Studio中使用Gulp的重要资源。

asp.net-coreasp.net-mvcsasssassviewviewview