基于.NET Core Angular模板：如何将Sass的background-url转为Base64？

嘿，针对你在.NET Core Angular模板里把Sass背景图转Base64的需求，我给你整理了两种靠谱的方案，适配不同版本的Webpack（毕竟Angular不同版本对应的Webpack版本不一样），一步步来就行：

方案1：用Webpack 5内置的Asset Modules（优先推荐） #

从Angular 12开始，官方默认用Webpack 5了，这个版本自带的Asset Modules直接就能替代旧的url-loader、file-loader，不用额外装依赖，配置也更清爽。

具体步骤： #

1. 先确认下你的Angular版本——如果是12及以上，那直接用这个方案就行。
2. Angular CLI默认不暴露Webpack配置，所以得用@angular-builders/custom-webpack来自定义：
   • 先装依赖：npm install @angular-builders/custom-webpack --save-dev
   • 在项目根目录新建webpack.config.js，写下面的配置：

     module.exports = {
       module: {
         rules: [
           {
             // 匹配你要转Base64的图片格式，这里是png/jpg/gif，可按需添加其他格式
             test: /\.(png|jpe?g|gif)$/i,
             type: 'asset/inline',
             // 可选：设置阈值，只有小于10KB的图片才转Base64，避免CSS体积过大
             parser: {
               dataUrlCondition: {
                 maxSize: 10 * 1024 // 单位是字节
               }
             }
           }
         ]
       }
     };
     

   • 打开angular.json，把构建和开发服务器的builder换成custom-webpack的：

     "architect": {
       "build": {
         "builder": "@angular-builders/custom-webpack:browser",
         "options": {
           "customWebpackConfig": {
             "path": "./webpack.config.js"
           },
           // 其他原来的配置（比如outputPath、index、main这些）保留不动
         }
       },
       "serve": {
         "builder": "@angular-builders/custom-webpack:dev-server",
         // 同样保留原来的配置
       }
     }
     

3. 之后运行ng build或者ng serve，符合条件的图片就自动转成Base64嵌到CSS里了。

方案2：用url-loader（兼容Webpack 4及更早版本） #

如果你的项目是Angular 11及以下（用Webpack 4），那用url-loader就合适，它是专门干这个事的老工具了。

具体步骤： #

1. 先装依赖：npm install url-loader file-loader --save-dev（file-loader是当图片超过阈值时的 fallback，用来把大图片输出到静态资源目录）
2. 同样新建webpack.config.js，配置如下：

   module.exports = {
     module: {
       rules: [
         {
           test: /\.(png|jpe?g|gif)$/i,
           use: [
             {
               loader: 'url-loader',
               options: {
                 limit: 10 * 1024, // 10KB以下转Base64
                 fallback: 'file-loader',
                 name: 'assets/[name].[hash].[ext]' // 大图片输出的路径和命名规则
               }
             }
           ]
         }
       ]
     }
   };
   

3. 同样修改angular.json里的builder配置，之后构建项目就生效了。

你的示例代码效果 #

原Sass代码：

body.login-page:not(.dashboard-pages) { 
  background-image: url(/images/atc-crowd.png); 
  background-position: center; 
  background-repeat: no-repeat; 
  background-attachment: fixed; 
  background-size: cover;
}

配置好之后，如果atc-crowd.png小于你设的阈值，构建后的CSS会变成这样：

body.login-page:not(.dashboard-pages) { 
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...); 
  /* 其他样式完全不变 */
}

小提醒 #

• 别把太大的图片转Base64！不然CSS文件会变得巨长，拖慢页面加载速度，只给小图标、小背景图用这个就好。
• 图片路径要对，建议把图片放在src/assets目录下，样式里用相对路径，比如url('../assets/images/atc-crowd.png')，这样Webpack才能正确找到它。

内容的提问来源于stack exchange，提问作者John Velasquez