ASP.NET核心角度SPA模板将自定义引导主题添加到webpack.config.js [英] ASP.NET core angular SPA template add Custom bootstrap theme to webpack.config.js

问题描述

我需要将自定义引导模板添加到asp.net核心spa模板. 我已经使用命令创建了圣殿:

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

尽管我需要使用放置在wwwroot文件夹中的自定义bootrap主题，但生成的模板仍符合我的需求.

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

有人可以帮我解释一下如何将该主题添加到webpack.config.vendor.js吗?

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

推荐答案

更新:

如何减少构建量也得到了充分证明:

How to enable less build is also well documented:

示例:构建LESS的简单Webpack设置

Brian Mancini撰写的有关React SPA模板的帖子也可能对Angular SPA模板有所帮助或类似地应用:

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引导程序自定义

在下面复制摘要:

1. 安装LESS和更少的加载器

1. Install LESS and less-loader

npm install --save less less-loader 

在ClientApp下设置以下文件和文件夹

Under ClientApp setup the following files and folders

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

配置引导程序和变量较少的文件

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

修改webpack.config.vendor.js

删除与css文件生成相关的配置.最终的供应商配置如下所示:

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

请参见要点 webpack.vendor.config.js

修改webpack.config.js进行较少的转换

请参见要点 webpack.config.js

修改boot-client.ts以包含站点和更少的引导程序

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

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

通过运行测试构建

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

修改_Layout.cshtml以包括bootstrap.css

Modify _Layout.cshtml to include bootstrap.css

这篇关于ASP.NET核心角度SPA模板将自定义引导主题添加到webpack.config.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！