Angular项目：如何通过Webpack将CSS文件编译为字符串变量？

可以通过Webpack的raw-loader实现编译时将CSS文件内容转为字符串变量的需求，以下是具体步骤：

方案一：针对指定CSS文件配置raw-loader #

1. 安装依赖
   先安装raw-loader：

   npm install raw-loader --save-dev
   

2. 扩展Angular的Webpack配置
   Angular CLI默认隐藏Webpack配置，可通过ngx-build-plus扩展：

   • 安装ngx-build-plus：

     npm install ngx-build-plus --save-dev
     

   • 修改angular.json的构建配置，把默认的browser构建器替换为ngx-build-plus:browser：

     "architect": {
       "build": {
         "builder": "ngx-build-plus:browser",
         // 保留原有其他配置
       }
     }
     

   • 创建webpack.partial.js文件，添加目标CSS文件的加载规则：

     const path = require('path');
     
     module.exports = {
       module: {
         rules: [
           {
             test: /\.css$/,
             // 指定需要转换的CSS文件路径
             include: path.resolve(__dirname, './src/assets/test.css'),
             use: 'raw-loader',
             exclude: /node_modules/
           }
         ]
       }
     };
     

3. 添加TypeScript声明
   在src目录创建custom.d.ts文件，避免TypeScript报错：

   declare module '*.css' {
     const content: string;
     export default content;
   }
   

4. 导入使用
   在组件或服务中直接导入CSS文件，即可获取字符串形式的内容：

   import convertedString from '../assets/test.css';
   
   // 传入CSSStyleSheet使用
   const styleSheet = new CSSStyleSheet();
   styleSheet.replaceSync(convertedString);
   document.adoptedStyleSheets = [...document.adoptedStyleSheets, styleSheet];
   

方案二：通过特殊后缀区分（更灵活） #

如果不想影响全局CSS的处理逻辑，可给需要转字符串的CSS文件加特殊后缀（如.css.raw）：

1. 修改webpack.partial.js规则：

   module.exports = {
     module: {
       rules: [
         {
           test: /\.css\.raw$/,
           use: 'raw-loader'
         }
       ]
     }
   };
   

2. 更新TypeScript声明：

   declare module '*.css.raw' {
     const content: string;
     export default content;
   }
   

3. 将原test.css重命名为test.css.raw，然后导入使用：

   import convertedString from './test.css.raw';
   

以上两种方案均在编译阶段完成CSS到字符串的转换，完全匹配你的需求。

内容的提问来源于stack exchange，提问作者Robin Chugh