studio - Plantilla ASP.NET núcleo angular SPA añadir tema de arranque personalizado a webpack.config.js

asp.net core angular 6

Question

Necesito agregar una plantilla de rutina de arranque personalizada a la plantilla de spa central de asp.net. Creé el templo usando el comando:

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

La plantilla generada se ajusta a mis necesidades aunque necesito utilizar un tema de bootrap personalizado que coloqué en la carpeta wwwroot.

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

¿Puede alguien ayudarme explicando cómo agregar este tema a webpack.config.vendor.js?

Answer 1

Actualizar:

Cómo habilitar menos compilación también está bien documentado:

Ejemplo: una configuración simple de Webpack que genera menos

Esta publicación, de Brian Mancini, relacionada con la plantilla de React SPA también puede ayudar o aplicarse de forma similar a la Plantilla de SPA Angular:

Personalización de ASP.NET Core Bootstrap

Copiando un resumen a continuación:

1. Instalar LESS y less-loader

   npm install --save less less-loader 

2. En la configuración de ClientApp, los siguientes archivos y carpetas

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

3. Configure el arranque y las variables menos archivos

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

   Elimine la configuración relacionada con la generación de archivos css. La configuración final del proveedor se verá a continuación:

   Ver gist webpack.vendor.config.js

5. Modifique webpack.config.js para realizar menos conversiones

   Ver gist webpack.config.js

6. Modifique boot-client.ts para incluir sitio y arranque menos

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

7. Pon a prueba tu compilación ejecutándose

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

8. Modifique _Layout.cshtml para incluir bootstrap.css