element 修改默认样式失败, 无法切换样式

Question

我自己想的偷懒办法, 在网页生成的时候获取不同的样式,我是这样写的.

在#App的Created周期执行下面的getCss方法

// 切换主题
    getCss () {
      const darkmode = window.localStorage.getItem('darkmode')
      if (darkmode === '0' || darkmode === null) {
        return require('element-ui/lib/theme-chalk/index.css')
      } else if (darkmode === '1') {
        return require('./darkmode/theme/index.css')
      }
    }

darkmode是存储在本地的切换标志, css样式是从element上下载的.
在本地调试的时候修改darkmode的值,可以正常切换样式,但是部署到服务器之后总是默认加载深色主题( 切换自己手写的样式是正常的, 切换导入的css文件就不行 ).

不知道是不是跟require有关系? 我不清除为什么在

( darkmode === '0' )

的时候还会加载

( './darkmode/theme/index.css' )

请各位指点. 或者有其他常用的切换主题样式的方法吗?

Answer 1

用require引入,会将css文件打包进app.css中, 导致样式修改失败. 改为使用require.ensure 和import引入 [参考文章] https://blog.csdn.net/palmer_kai/article/details/105295826