我需要将自定义引导模板添加到 asp.net core spa 模板。
我使用命令创建了寺庙:
dotnet new --install Microsoft.AspNetCore.SpaTemplates::*
dotnet new angular
生成的模板适合我的需求,尽管我需要使用放置在 wwwroot 文件夹中的自定义引导主题。
CustomTheme
├── css
│ ├── style.less
├── js
├── fonts
├── img
有人可以帮我解释如何将此主题添加到 webpack.config.vendor.js 中吗?
Update:
如何启用更少的构建也有详细记录:
示例:构建 LESS 的简单 Webpack 设置
Brian Mancini 撰写的这篇与 React SPA 模板相关的文章可能对 Angular SPA 模板有所帮助或类似地适用:
ASP.NET Core 引导程序自定义
复制总结如下:
-
安装 LESS 和 less-loader
npm install --save less less-loader
-
在 ClientApp 下设置以下文件和文件夹
less/site.less
less/bootstrap/bootstrap.less
less/bootstrap/variables.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 */
-
Modify webpack.config.vendor.js
删除与 css 文件生成相关的配置。最终的供应商配置如下所示:
参见要点webpack.vendor.config.js
-
Modify webpack.config.js
执行较少的转换
参见要点webpack.config.js
-
Modify boot-client.ts
减少站点和引导程序
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
Modify _Layout.cshtml
包括bootstrap.css
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)