sass webpack_如何在Visual Studio和Webpack中编译Sass文件

sass webpack

Sass is a very popular CSS pre-processor. The intent of this tutorial is to show you how to compile Sass files within Visual Studio using Webpack. Our discussion will include minification and autoprefixing for production.

Sass是非常流行CSS预处理器。 本教程的目的是向您展示如何使用Webpack在Visual Studio中编译Sass文件。 我们的讨论将包括生产的最小化和自动前缀。

Sure, there are some plug-ins in the Visual Studio Marketplace, and it can be nice to just install a plug-in and forget about configuration. But what happens if the plug-in is not supported anymore and stops working with newer Visual Studio versions? Well, too bad. This is the case with one of the most popular compiler plug-ins on the market.

当然，Visual Studio Marketplace中有一些插件，只安装插件而不用担心配置会很好。 但是，如果不再支持该插件并停止使用较新的Visual Studio版本，会发生什么情况？ 好吧，太糟糕了。 市场上最流行的编译器插件之一就是这种情况。

By configuring the compilation yourself, you will have total control over the output. Also, vendor prefixes will be added automatically to your CSS rules. How cool is that?

通过自己配置编译，您将完全控制输出。 另外，供应商前缀将自动添加到您CSS规则中。 多么酷啊？

先决条件 (Prerequisites)

You will need to have Node installed, and you can grab it here. That’s it really. You’ll also need npm, but it will also be installed with Node.

您将需要安装Node，并且可以在此处获取它。 就是这样。 您还需要npm，但它还将与Node一起安装。

创建项目 (Creating the Project)

Note: We will be creating a .NET Core MVC app, but the same principles apply to any ASP.NET MVC app. You would just need to modify the Webpack configuration a little bit to output the CSS file to the Content directory.

注意：我们将创建一个.NET Core MVC应用程序，但是相同的原理适用于任何ASP.NET MVC应用程序。 您只需要稍微修改Webpack配置即可将CSS文件输出到Content目录。

Open Visual Studio and create a new ASP.NET Core Web Application, then select Web Application (Model-View-Controller). I’m naming my project netcore-sass-webpack.

打开Visual Studio并创建一个新的ASP.NET Core Web应用程序 ，然后选择Web应用程序(Model-View-Controller) 。 我正在命名项目netcore-sass-webpack 。

Create a Styles folder within the root of the project. Inside it, create a Sass file and name it site.scss. Open this new Sass file and copy the following:

在项目的根目录下创建一个Styles文件夹。 在其中创建一个Sass文件，并将其命名为site.scss 。 打开这个新的Sass文件并复制以下内容：

/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification\ 
for details on configuring this project to bundle and minify static web assets. */
body {
    padding-top: 50px;
    padding-bottom: 20px;
    background: #D69655 url('../wwwroot/images/pattern.png') repeat;
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Carousel */
.carousel-caption p {
    font-size: 20px;
    line-height: 1.4;
}

/* Make .svg files in the carousel display properly in older browsers */
.carousel-inner .item img[src$=".svg"] {
    width: 100%;
}

/* QR code generator */
#qrCode {
    margin: 15px;
}

/* Hide/rearrange for smaller screens */
@media screen and (max-width: 767px) {
    /* Hide captions */
    .carousel-caption {
        display: none;
    }
}

You will notice that this is the same CSS provided by Visual Studio when we created the project, with the exception of the background rule in the body tag. Now delete the provided CSS located under wwwroot/css (both files: site.css and site.min.css). Don’t worry, we will auto-generate these with Webpack.

您会注意到，这与我们创建项目时Visual Studio提供CSS相同，但body标记中的background规则除外。 现在，删除位于wwwroot/css下的提供CSS(两个文件： site.css和site.min.css )。 不用担心，我们将使用Webpack自动生成它们。

Now, download