主题化与SCSS&；努克斯

我试图让我的用户有不同的主题可供选择，但我似乎无法让它工作。我尝试了多种不同的方法，其中一种方法是使用两个不同的文件，我根据主题是否为浅/暗导入它们，但一旦导入，它将保留在页面上。另一个是在SCS内，如下所示：

$enable rounded:true；
[主题=“黑暗”]{
$blue:#232c3b；
$body bg:#262626；
$体色：白色；
}
[theme=“light”]{
$body bg:#ffffff；
$body color:#000000；
}
@导入“bootstrap/scss/bootstrap.scss”；
@导入“bootstrap vue/src/index.scss”；

然后在我的布局/default.vue中：

import（`~/assets/scss/main.scss`）
导出默认值{
数据（）{
返回{
黑暗模式：错误，
}
},
安装的（）{
让bodyElement=document.body；
bodyElement.classList.add（“应用程序背景”）；
设htmlElement=document.documentElement；
让theme=localStorage.getItem（“theme”）；
如果（主题=='dark'）{
bodyElement.setAttribute（'theme'，'dark'）
this.darkMode=true
}否则{
setAttribute（'theme'，'light'）；
this.darkMode=false
}
},
观察：{
暗模式：函数（）{
设htmlElement=document.documentElement；
if（此.darkMode）{
setItem（“theme”，“dark”）；
setAttribute（'theme'，'dark'）；
}否则{
setItem（“theme”，“light”）；
setAttribute（'theme'，'light'）；
}
}
}
}

---

然而，当我这样做的时候，什么也没有发生。我已经想了好几天了，但似乎还没弄明白。这让我只想使用CSS，避免使用SCS，即使我真的想使用SCS，但我认为您导入SCS文件的方式是错误的。请尝试将其从脚本部分导入，如下所示：

<style lang="scss">
   @import '~/assets/scss/main.scss';
</style>

@导入“~/assets/scss/main.scss”；

我想你可以在你的项目中使用它，你可以自己切换到主题或自定义