ASP.NET noyau angulaire SPA modèle ajouter Custom bootstrap thème à webpack.config.js

Question

J'ai besoin d'ajouter un modèle de bootstrap personnalisé au modèle de spa de base asp.net. J'ai créé le temple en utilisant la commande:

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

Le modèle généré correspond à mes besoins, bien que je dois utiliser un thème personnalisé bootrap que je placé dans le dossier wwwroot.

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

Quelqu'un peut-il s'il vous plaît aidez-moi expliquer comment ajouter ce thème à webpack.config.vendor.js?

Answer 1

Mise à jour:

Comment activer moins construire est également bien documenté:

Example: A simple Webpack setup that builds LESS

Ce poste, par Brian Mancini, relatif au modèle de SPA React peut aider ou appliquer de façon similaire au angulaire SPA modèle ainsi:

ASP.NET Core Bootstrap Customization

la copie d'un résumé ci-dessous:

1. installer moins et moins chargeur

   npm install --save less less-loader 
   

2. Dans la configuration ClientApp les fichiers et les dossiers suivants

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

3. Configurer le bootstrap et moins de variables fichiers

   /* 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. Modifier webpack.config.vendor.js

   Supprimer la configuration liée à la génération de fichier css. config Final fournisseur ressemblera ci-dessous:

   Voir essentiel webpack.vendor.config.js

5. Modifier webpack.config.js pour effectuer la conversion moins

   Voir essentiel webpack.config.js

6. Modifier boot-client.ts pour inclure le site et bootstrap moins

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

7. Testez votre produit en cours d'exécution

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

8. Modifier _Layout.cshtml pour inclure bootstrap.css