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

问题:

I need to add custom bootstrap template to asp.net core spa template. I've created the temple using command:

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

The generated template fits my needs although I need to use a custom bootrap theme which I placed in wwwroot folder.

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

Can someone please help me out explaining how to add this theme to webpack.config.vendor.js?

回答1:

Update:

How to enable less build is also well documented:

Example: A simple Webpack setup that builds LESS

This post, by Brian Mancini, relating to the React SPA template may help or apply similarly to the Angular SPA Template as well:

ASP.NET Core Bootstrap Customization

Copying a summary below:

1. Install LESS and less-loader

   npm install --save less less-loader  

2. Under ClientApp setup the following files and folders

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

3. Configure the bootstrap and variables less files

   /* 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 */ 

4. Modify webpack.config.vendor.js

   Remove configuration related to css file generation. Final vendor config will look like below:

   See gist webpack.vendor.config.js

5. Modify webpack.config.js to perform the less conversion

   See gist webpack.config.js

6. Modify boot-client.ts to include site and bootstrap less

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

7. Test your build by running

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

8. Modify _Layout.cshtml to include bootstrap.css

文章来源: ASP.NET core angular SPA template add Custom bootstrap theme to webpack.config.js