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

来源：https://stackoverflow.com/questions/46455421/asp-net-core-angular-spa-template-add-custom-bootstrap-theme-to-webpack-config-j