Question

我的Angular（v5.2）项目中有一个CSS文件。它包含在我的全局样式中，并且按我的意愿在应用程序中可以正常工作。但是，我还需要将此文件读取为字符串并对其进行其他处理。基本上，为避免重复代码，我希望能够做到：

import styles from 'styles.css'; // styles should be a string

// later
console.log(styles); // do something with the string

有没有办法做到这一点？

编辑：我正在寻找一种无需使用任何请求即可完成此操作的方法（即，我不想将css从src中移出）。

Answer 1

假设资产文件夹中有css，您可以将文件读取为

cssUrl = 'assets/styles.css';
readCssData () {
  this.http.get(this.cssUrl)
    .subscribe(
      data => {
        console.log(data.text())
      },
      err => {
        console.log(err)
      });
 }

Answer 2

要读取JSON或CSS的任何类型的文件，可以按以下方式使用Angular中的HttpClient Get方法。

将CSS放在特定的文件夹中。（例如asset / styles.css）
使用get方法拨打服务电话

在您的componen.ts或service.ts中，您可以使用以下代码获取css文件

readCSSFile (url) {
  this.http.get(url)
    .subscribe(
      cssData => {
        console.log(cssData)
      },
      err => {
        console.log(err)
      });
 }

 readCSSFile('./assets/styles.css');

注意：您应该根据文件夹结构更改路径/ URL。

在Angular中将CSS作为字符串导入

2 个答案: