ASP.NET核心角度SPA模板将自定义引导主题添加到webpack.config.j

发布时间：2020-12-16 09:33:09 所属栏目：asp.Net 来源：网络整理

导读：我需要将自定义引导程序模板添加到asp.net核心spa模板中. 我用命令创建了太阳穴： dotnet new --install Microsoft.AspNetCore.SpaTemplates::*dotnet new angular 生成的模板符合我的需要,虽然我需要使用我放在wwwroot文件夹中的自定义bootrap主题. CustomT

我需要将自定义引导程序模板添加到asp.net核心spa模板中.
我用命令创建了太阳穴：

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

生成的模板符合我的需要,虽然我需要使用我放在wwwroot文件夹中的自定义bootrap主题.

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

有人可以帮我解释如何将这个主题添加到webpack.config.vendor.js？

解决方法

更新：

如何减少构建也有很好的记录：

Example: A simple Webpack setup that builds LESS

这篇由Brian Mancini撰写的关于React SPA模板的文章也可以提供类似于Angular SPA模板的帮助或应用：

ASP.NET Core Bootstrap Customization

复制以下摘要：

>安装LESS和less-loader

npm install --save less less-loader

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

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

>配置bootstrap和变量less文件

/* 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文件生成相关的配置.最终的供应商配置如下所示：

见要点webpack.vendor.config.js
>修改webpack.config.js以执行较少的转换

见要点webpack.config.js
>修改boot-client.ts以包含site和bootstrap less

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

>通过运行测试您的构建

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!