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

【问题标题】：Unload/remove dynamically loaded css files卸载/删除动态加载的 css 文件
【发布时间】：2019-06-02 08:58:41
【问题描述】：

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

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

控制台输出对我来说是一个空对象，并且一个新的匿名

有没有办法从 DOM 中移除

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

【问题讨论】：

标签： css dom vue.js webpack css-loader

【解决方案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/

【讨论】：

谢谢，它已经给了我一个想法。写我的问题时，我想到了一种纯 javascript 方法，但利用组件及其 DOM 控件值得一试！

【解决方案2】：

感谢 OZZIE，我质疑我的方法并发现导入 css 文件，就像我的问题所示（通过 ES6 导入或 require.context(...)），没有用，因为我们无法识别它，我们无法访问 <style> 元素，使我们无法进入 DOM，也无法操作它。

相反，我们将在 <head> 中手动链接 css 文件，因为我们知道它们的名称和路径。

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);

【讨论】：