css - 卸载/删除动态加载的 css 文件

Question

像这样加载一个 css 文件后:

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

控制台输出对我来说是一个空对象，一个新的匿名 <style> 标签位于我的 index.html 的 中。到目前为止一切顺利，但如果我(在此示例中)想要将主题更改为 light-theme.css 怎么办？这将合并两个主题，因为 dark-theme.css 已经加载。

有没有办法从 DOM 中移除 <style> 标签？

为了进一步说明我的问题，提供的示例显示了一个抽象的行为，我只对从 DOM 中删除动态加载的 css 感兴趣。

Answer 1

我不了解 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/