Question

我需要将自定义引导程序模板添加到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吗？

Answer 1

更新

如何启用较少的构建也有详细记录：

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

请参阅要点webpack.vendor.config.js
修改webpack.config.js以执行较少的转化

请参阅要点webpack.config.js

修改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

修改_Layout.cshtml以包含bootstrap.css

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

1 个答案: