ASP.NET core Angular SPA 模板将自定义引导主题添加到 webpack.config.js

2023-12-01

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

复制总结如下:

  1. 安装 LESS 和 less-loader

    npm install --save less less-loader 
    
  2. 在 ClientApp 下设置以下文件和文件夹

    less/site.less
    less/bootstrap/bootstrap.less
    less/bootstrap/variables.less
    
  3. 配置引导程序和变量较少的文件

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

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

    参见要点webpack.vendor.config.js

  5. Modify webpack.config.js执行较少的转换

    参见要点webpack.config.js

  6. Modify boot-client.ts减少站点和引导程序

    import './less/site.less';  
    import './less/bootstrap/bootstrap.less';  
    
  7. 通过运行来测试您的构建

    node node_modules/webpack/bin/webpack.js --config webpack.config.js  
    node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js
    
  8. Modify _Layout.cshtml包括bootstrap.css

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

ASP.NET core Angular SPA 模板将自定义引导主题添加到 webpack.config.js 的相关文章

随机推荐