Angular v5.2中如何将CSS文件作为字符串导入（不移出src）

针对你这个需求，完全可以通过Webpack的raw-loader来实现——不用把CSS移出src目录，也不需要额外的HTTP请求，具体步骤如下：

• 第一步：安装raw-loader依赖
  因为Angular 5默认的Webpack配置里没有包含这个loader，所以先安装它：

  npm install raw-loader --save-dev
  # 或者用yarn
  yarn add raw-loader --dev
  

• 第二步：直接通过loader引入CSS文件
  在你需要获取CSS字符串的组件或服务里，用raw-loader前缀来导入你的CSS文件，这样导入的内容就是纯字符串格式了：

  import styles from 'raw-loader!./path/to/styles.css';
  
  // 现在你可以直接对这个字符串做任何操作
  console.log(styles);
  // 比如提取特定样式规则、做字符串替换等
  

• 额外说明：避免样式重复注入
  因为你已经把这个CSS文件加入了全局样式配置（比如angular-cli.json的styles数组），通过raw-loader导入的只是文件的字符串内容，不会再次把样式注入到页面中，完全不用担心重复生效的问题。

如果你的项目是通过Angular CLI eject过的（拥有自定义Webpack配置文件），也可以在配置里添加规则，这样就不用每次导入都写raw-loader!前缀：

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: 'raw-loader',
        include: [path.resolve(__dirname, 'path/to/your/styles.css')]
      }
    ]
  }
};

不过这种配置只适合你需要把特定CSS文件读取为字符串的场景，全局样式的导入还是保持原来的配置即可。

内容的提问来源于stack exchange，提问作者Barry McNamara