Выгрузить / удалить динамически загруженные CSS-файлы - PullRequest
Новая
       9

Выгрузить / удалить динамически загруженные CSS-файлы

0 голосов
/ 07 января 2019

После загрузки файла CSS, как это: 

const themes = ['dark-theme.css', 'light-theme.css'];
async function loadcss(file) {
    return await import(file);
}
loadcss(themes[0]).then(console.log)

Вывод на консоль для меня пустой объект, а новый анонимный тег

Ответы [ 2 ]

0 голосов
/ 07 января 2019

Благодаря OZZIE я подверг сомнению свою методологию и обнаружил, что импорт файлов css, как показывает мой вопрос (через импорт ES6 или require.context (...)), бесполезен, так как мы не можем определить мы не получаем доступа к элементу <style>, поэтому у нас нет доступа к DOM и нет возможности манипулировать им.

Вместо этого мы вручную свяжем css-файлы в <head>, так как мы знаем их имя и путь. 

const themes = ['dark-theme.css', 'light-theme.css'];
const head = document.body.parentElement.firstElementChild;
const link = document.createElement('link');
link.setAttribute('href', process.env.BASE_URL + themes[0]);
link.setAttribute('id', themes[0]); // set id so we can remove it later
head.appendChild(link);
0 голосов
/ 07 января 2019

Я не знаю vue.js, но вот простой пример в React. Надеюсь, это как-то поможет :), возможно, хотя бы некоторые идеи:) 

class TodoApp extends React.Component {
  static themes = {
    dark: 'dark-theme.css', 
    light: 'light-theme.css',
  };

  render() {
    return ReactDOM.createPortal(
        (<link rel="stylesheet" href={TodoApp.themes.dark} type="text/css"></link>),
      document.head
    );  
  }
}

ReactDOM.render(<TodoApp />, document.querySelector("#app"))

http://jsfiddle.net/3y4hw2ox/

...