Импортировать CSS как строку в Angular

Question

У меня есть файл CSS в моем проекте Angular (v5.2).Он включен в мои глобальные стили и прекрасно работает в приложении, как я хочу.Тем не менее, мне также нужно прочитать этот файл как строку и сделать что-то еще с ним.В основном, чтобы избежать повторения кода, я хочу иметь возможность:

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

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

Есть ли способ, которым я могу это сделать?

РЕДАКТИРОВАТЬ: я ищу способ сделать этобез использования каких-либо запросов (т.е. я не хочу перемещать CSS из src).

Answer 1

Чтобы прочитать любой тип файла в формате JSON или CSS, вы можете использовать метод HttpClient Get в угловом формате следующим образом.

• Поместите свой CSS в определенную папку. (ex assets / 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 в зависимости от структуры вашей папки.

Answer 2

Если у вас есть css в папке assets, вы можете прочитать файл как

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