时间戳

首页 > 解决方案 > 如何有条件地使用暗模式 css 切换基本 css 并在 vuejs 中使用变量？

javascript - 如何有条件地使用暗模式 css 切换基本 css 并在 vuejs 中使用变量？

问题描述

我创建了一个_darkmode.scss文件以在我的 laravel+vuejs 应用程序上全局应用暗模式。

我不知道如何用基本 css 替换/切换它，即app.css使用 webpack mix 函数生成的。

我在导航栏中有一个拨动开关，当@change此文件 ( _darkmode.scss) 应包含/排除时。

mix
  .js("resources/assets/js/app.js", `${publicPath}/js`)
  .sass("resources/assets/sass/app.scss", `${publicPath}/css`)
  .extract(toExtract)
  .setPublicPath(publicPath)
  .setResourceRoot("../")
  .browserSync({
    proxy: "http://localhost:8000",
    port: 8080,
    files: [`${publicPath}/*`]
  });

if (mix.inProduction()) {
  mix.version();
}

这是我app.scss导入其他样式的文件

@import "variables";

// Bootstrap
@import "~bootstrap/scss/bootstrap";

@import "~font-awesome/scss/font-awesome";
@import url("https://fonts.googleapis.com/css?family=Poppins:200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i");

@import "~vue-loaders/dist/vue-loaders.css";
@import "~toastr/build/toastr.css";
@import "~vue-multiselect/dist/vue-multiselect.min.css";
@import "~vue-wysiwyg/dist/vueWysiwyg.css";
@import "~emojionearea/dist/emojionearea.min.css";
@import "~nprogress/nprogress.css";

@import "base/all";
@import "element/all";
@import "layout/all";

请帮助我。

标签： javascriptcssvue.jssass

解决方案

推荐阅读