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

user_2078493 0
Viewed 2353

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?

single-page-application angular webpack asp.net-core
1 Answers

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

user_921890
Related