CODEWITHSUNDEEP
cssasp.net-mvcasp.net-coresassview
TaouBen
TaouBen

Reputation: 1315

Can't apply SASS styling to my view in ASP.NET MVC application?

I have a problem with styling, I have created some simple styling (scss file):

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

I have created my first view ever like that :

@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>

And it is not working!

I added the runat="server" based on a response found already here in the stack that fixed someone else problem, but did not to mine.

Any ideas? Any help would be much appreciated.

Upvotes: 0

Views: 1339

Answers (1)

HMZ
HMZ

Reputation: 3127

The easiest way to compile sass with visual studio is via the WebCompiler extension.

Download and install from the VS Marketplace.

Now, after installing the extension and restarting Visual Studio you have to options:

  1. You can either compile your files manually via the added context menu option (right click on file):

  2. Or simply let the extension handle the compilation on save: When you compile a sass file for the first time the extension creates a compilerconfig.json file which will store your input and output files like this:

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

Now the extension will start watching the inputFile for changes and once you save a change it will compile and output to the outputFile path.

You can edit your input and output paths to match where you want your output files to be stored.

For more complex scenarios see MSDN for bundling and minification. Its a great resource on using Gulp in Visual Studio.

Upvotes: 1

Related Questions