如何将CSS嵌入Angular初始HTML？VS2017创建的Webpack构建SPA

嘿，我之前在VS2017的Angular模板项目里也遇到过这个需求，刚好摸索出几个可行的方案，针对Webpack构建的场景给你参考：

方案一：通过Webpack插件自动内联CSS #

这个方案适合在构建过程中直接完成内联，不用手动修改文件：

1. 安装依赖插件
   首先安装html-webpack-inline-source-plugin（如果你的Webpack是4.x版本，需要安装兼容版本html-webpack-inline-source-plugin@1.0.0-beta.2）：

   npm install html-webpack-inline-source-plugin@1.0.0-beta.2 --save-dev
   

2. 修改Webpack配置文件
   找到项目根目录下的Webpack配置文件（通常是webpack.config.js或分环境的webpack.prod.config.js），找到HtmlWebpackPlugin的配置块，添加inlineSource选项并引入新插件：

   const HtmlWebpackPlugin = require('html-webpack-plugin');
   const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');
   
   // ... 其他配置代码
   
   plugins: [
     new HtmlWebpackPlugin({
       template: './src/index.html',
       // 匹配所有.css后缀的文件，将其内联到HTML中
       inlineSource: '\\.(css)$'
     }),
     new HtmlWebpackInlineSourcePlugin()
   ]
   

3. 调整CSS加载规则
   暂时注释掉MiniCssExtractPlugin的配置（这个插件会把CSS提取成单独文件，和内联需求冲突），将CSS loader配置改为：

   module: {
     rules: [
       {
         test: /\.css$/,
         use: [
           'css-loader' // 仅用css-loader将CSS转换为JS模块
         ]
       }
     ]
   }
   

   这样Webpack会把CSS内容打包到JS中，再通过插件注入到HTML的<style>标签里。

方案二：构建后用脚本手动替换（简单易上手） #

如果不想折腾Webpack插件，也可以写个小脚本在构建完成后自动把CSS内容嵌入HTML：

1. 创建内联脚本
   在项目根目录新建inline-css.js文件，内容如下：

   const fs = require('fs');
   const path = require('path');
   
   // 路径根据你的项目实际情况调整
   const htmlFilePath = path.join(__dirname, 'wwwroot/index.html');
   const cssFilePath = path.join(__dirname, 'wwwroot/dist/vendor.css');
   
   // 读取HTML和CSS内容
   let htmlContent = fs.readFileSync(htmlFilePath, 'utf8');
   const cssContent = fs.readFileSync(cssFilePath, 'utf8');
   
   // 替换<link>标签为<style>标签
   const cssLinkRegex = /<link rel="stylesheet" href="\/dist\/vendor.css\?v=[^"]+">/;
   htmlContent = htmlContent.replace(cssLinkRegex, `<style>${cssContent}</style>`);
   
   // 写回修改后的HTML
   fs.writeFileSync(htmlFilePath, htmlContent);
   

2. 添加构建后执行脚本
   打开package.json，在scripts里添加postbuild命令：

   "scripts": {
     "build": "webpack --mode production",
     "postbuild": "node ./inline-css.js"
   }
   

   这样每次执行npm run build后，脚本会自动把vendor.css的内容嵌入到初始HTML中，替换掉原来的<link>标签。

注意事项 #

• 如果项目区分开发和生产环境，记得对应调整相应环境的Webpack配置。
• 内联CSS后，要测试页面样式是否正常加载，避免路径或语法问题导致样式失效。

内容的提问来源于stack exchange，提问作者Unknown developer