.Net Core MVC Assets Compilation 📂

.Net Core MVC project is integrated with Webpack and Gulp (see available tasks):

For SCSS:

• All *.scss files within src/ directory are processed by node-sass. Output files will have the next filename format: {filename}.css. Example:

Note: You can use the below SCSS file to write your own custom style.

Copy

body{
  background-color: #fafafa;
}

• src\site.scss files will be processed and generate css files at wwwroot\css\site.css.
• Other scss files except site.scss, will be processed and generate css files at wwwroot\vendor\libs folder.
• Include this css file to the template :
Copy

<environment include="Development"><link rel="stylesheet" href="~/css/site.css" /></environment>
<environment exclude="Development"><link rel="stylesheet" href="~/css/site.css" asp-append-version="true" /></environment>

For JS:

• All .js files within wwwroot/ directory are processed by Webpack. Output files will have the next filename format: {filename}.js. Example:

Note: You can use the below site.js file to write your own custom script.

Copy

$(() => {
  alert('Alert Success!')
})

• wwwroot/js/*.js files are used directly for the template and do not require processing. Consequently, any updates or changes in site.js will be directly reflected in the template, as it is independent of webpack processing tasks.
• src\js\*.js files will be processed and generated js files as wwwroot\vendor\js\*.js.
• Include this js file to the template :
Copy

<environment include="Development"><script src="~/js/site.js"></script></environment>
<environment exclude="Development"><script src="~/js/site.js" asp-append-version="true"></script></environment>