SCSS和nuxt的主题

Question

我试图让我的用户可以选择不同的主题，但是我似乎无法使其正常工作。我尝试了多种不同的方法，一种方法是拥有两个不同的文件，然后根据主题是浅色还是深色来导入它们，但是一旦导入主题，它就会保留在页面上。另一个像这样在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';

然后在我的布局/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');
      }
    }
  }
}

但是当我这样做时什么也没发生。我已经尝试了好几天，但似乎无法理解。即使我确实想使用scss，它也使我只想使用CSS并避免使用SCSS

Answer 1

我认为您以错误的方式导入了scss文件。请尝试从脚本部分中将其导入，如下所示：

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