使用 SCSS 和 nuxt 进行主题化答案

【问题标题】：Theming with SCSS & nuxt使用 SCSS 和 nuxt 进行主题化
【发布时间】：2020-06-19 14:10:45
【问题描述】：

我试图让我的用户有不同的主题可供选择，但我似乎无法让它发挥作用。我尝试了多种不同的方法，一种方法是拥有两个不同的文件，我根据主题是浅色/深色来导入它们，但是一旦导入它就会留在页面上。另一个在 SCSS 中是这样的：

$enable-rounded: true;

[theme="dark"] {
  $blue: #232c3b;
  $body-bg: #262626;
  $body-color: white;
}
[theme="light"]  {
  $body-bg: #ffffff;
  $body-color: #000000;
}

@import 'bootstrap/scss/bootstrap.scss';
@import 'bootstrap-vue/src/index.scss';

然后在我的 layouts/default.vue 中：

import(`~/assets/scss/main.scss`)
export default {
data() {
  return {
    darkMode: false,
  }
},
mounted() {
  let bodyElement = document.body;
  bodyElement.classList.add("app-background");
  let htmlElement = document.documentElement;
  let theme = localStorage.getItem("theme");
  if (theme === 'dark') {
      bodyElement.setAttribute('theme', 'dark')
      this.darkMode = true
  } else {
      bodyElement.setAttribute('theme', 'light');
      this.darkMode = false
  }
},
watch: {
    darkMode: function () {
      let htmlElement = document.documentElement;
      if (this.darkMode) {
          localStorage.setItem("theme", 'dark');
          htmlElement.setAttribute('theme', 'dark');
      } else {
          localStorage.setItem("theme", 'light');
          htmlElement.setAttribute('theme', 'light');
      }
    }
  }
}

但是，当我这样做时，什么也没有发生。我一直试图弄清楚这几天，但似乎无法理解。这让我只想使用 CSS 而避免使用 SCSS，即使我真的想使用 scss

【问题讨论】：

标签： css vue.js sass vuejs2 nuxt.js

【解决方案1】：

我认为您以错误的方式导入 scss 文件。请尝试从脚本部分导入如下：

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

【讨论】：

【解决方案2】：

我认为您可以将其用于您的项目，您可以自行切换到主题或自定义

https://color-mode.nuxtjs.org/

【讨论】：