ASP.NET core angular SPA template add custom bootstrap theme to webpack.config.js

Question

I need to add a custom bootstrap template to an asp.net core template template. I created a temple using the command:

dotnet new --install Microsoft.AspNetCore.SpaTemplates::*
dotnet new angular

The generated template meets my needs, although I need to use the special theme of the boot file that I placed in the wwwroot folder.

CustomTheme
├── css
│   ├── style.less
├── js
├── fonts
├── img

Can someone please help me explain how to add this topic to webpack.config.vendor.js?

Answer 1

Update:

How to enable less assembly is also well documented:

Example: a simple Webpack setup that creates LESS

, React SPA, Angular SPA:

ASP.NET Core Bootstrap

:

• LESS less-loader

  npm install --save less less-loader 
  

• ClientApp

  less/site.less
  less/bootstrap/bootstrap.less
  less/bootstrap/variables.less
  

• /* less/bootsrap/bootstrap.less */
  /* import bootstrap from source */
  @import '../../../node_modules/bootstrap/less/bootstrap.less';
  
  /* import custom overrides */
  @import 'variables.less';
  
  
  
  /* less/bootstrap/variables.less */
  
  /* import the original file */
  @import '../../../node_modules/bootstrap/less/variables.less';
  
  
  /* Variables your overrides below
  -------------------------------------------------- */
  
  
  
  
  /* less/site.less */
  @import './bootstrap/variables.less';
  /* your overrides below */
  

• webpack.config.vendor.js

  , css. :

  . gist webpack.vendor.config.js

• webpack.config.js,

  . gist webpack.config.js

• boot-client.ts,

  import './less/site.less';  
  import './less/bootstrap/bootstrap.less';  
  

• ,

  node node_modules/webpack/bin/webpack.js --config webpack.config.js  
  node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js
  

• _Layout.cshtml, bootstrap.css