在scss中使用Javascript变量

我还需要一段时间才能找到一个解决方案来使用javascript变量具有scss值

让我解释一下我的问题。 我使用VueJs/Vuetify，我的主题有两个入口点

第一个是这样的json文件：

module.exports = {
  primary: { base: '#4d7cff', dark: '#2756d8', light: '#96b0fb' },
  secondary: { base: '#00bda5', dark: '#209284', light: '#cef1ec' },
  content: { base: '#37467a', dark: '#242c47', light: '#c3cbe6' },
  danger: { base: '#e43858', dark: '#d22545', light: '#E36d83' },
  success: { base: '#00c28d', dark: '#199c79', light: '#0bebae' },
  accent: '#f5f8fa',
  gradient: 'linear-gradient(45deg, #00bda5, #4d7cff)'
}

// Theme colors
$color-primary-base: #4d7cff;
$color-primary-dark: #2756d8;
$color-primary-light: #96b0fb;

$color-secondary-base: #4d7cff;
$color-secondary-dark: #209284;
$color-secondary-light: #cef1ec;

$color-content-base: #37467a;
$color-content-dark: #242c47;
$color-content-light: #c3cbe6;

$color-danger-base: #e43858;
$color-danger-dark: #d22545;
$color-danger-light: #ff8097;

$color-success-base: #00c28d;
$color-success-dark: #199c79;
$color-success-light: #14e1a9;

$color-accent: #f5f8fa;

vuetify two需要并使用此文件来创建自定义颜色值，并且可以完美地工作

第二个是一个简单的scss文件：

module.exports = {
  primary: { base: '#4d7cff', dark: '#2756d8', light: '#96b0fb' },
  secondary: { base: '#00bda5', dark: '#209284', light: '#cef1ec' },
  content: { base: '#37467a', dark: '#242c47', light: '#c3cbe6' },
  danger: { base: '#e43858', dark: '#d22545', light: '#E36d83' },
  success: { base: '#00c28d', dark: '#199c79', light: '#0bebae' },
  accent: '#f5f8fa',
  gradient: 'linear-gradient(45deg, #00bda5, #4d7cff)'
}

// Theme colors
$color-primary-base: #4d7cff;
$color-primary-dark: #2756d8;
$color-primary-light: #96b0fb;

$color-secondary-base: #4d7cff;
$color-secondary-dark: #209284;
$color-secondary-light: #cef1ec;

$color-content-base: #37467a;
$color-content-dark: #242c47;
$color-content-light: #c3cbe6;

$color-danger-base: #e43858;
$color-danger-dark: #d22545;
$color-danger-light: #ff8097;

$color-success-base: #00c28d;
$color-success-dark: #199c79;
$color-success-light: #14e1a9;

$color-accent: #f5f8fa;

我的目标是将json文件与scss变量连接起来，为整个应用程序提供一个入口点

为什么这样做？ Vuetify提供了一个scss变量重载系统来修改组件的样式

我们的想法是从javascript文件控制这个重载

除此之外，由于vuetify的限制，我必须在响应上下文中控制颜色（例如桌面上的白色标题和移动设备上的蓝色标题），因此我必须使用scss变量

我在媒体上找到了一个乍一看似乎能回答我问题的人

但是当我尝试测试它时，我得到了以下错误：

in ./src/assets/styles/vuetify.scss

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'options'. These properties are valid:
   object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }
    at validate (C:\Users\33770\Documents\Calimed\novalys-front\node_modules\schema-utils\dist\validate.js:96:11)
    at Object.loader (C:\Users\33770\Documents\Calimed\novalys-front\node_modules\sass-loader\dist\index.js:36:28)

Vuetify.scss

@import './novalys/map.scss';
@import '~vuetify/src/styles/main.sass';

const sass = require('node-sass')
const sassUtils = require('node-sass-utils')(sass)
const sassVars = require(__dirname + '/src/theme/index.js')

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        prependData: `@import "@/assets/styles/novalys/map.scss";`,
        options: {
          functions: {
            'get($keys)': function(keys) {
              keys = keys.getValue().split('.')
              let result = sassVars
              let i
              for (i = 0; i < keys.length; i++) {
                result = result[keys[i]]
              }
              result = sassUtils.castToSass(result)
              return result
            }
          }
        }
      }
    }
  },
  transpileDependencies: ['vuetify']
}

vue.config.js

@import './novalys/map.scss';
@import '~vuetify/src/styles/main.sass';

const sass = require('node-sass')
const sassUtils = require('node-sass-utils')(sass)
const sassVars = require(__dirname + '/src/theme/index.js')

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        prependData: `@import "@/assets/styles/novalys/map.scss";`,
        options: {
          functions: {
            'get($keys)': function(keys) {
              keys = keys.getValue().split('.')
              let result = sassVars
              let i
              for (i = 0; i < keys.length; i++) {
                result = result[keys[i]]
              }
              result = sassUtils.castToSass(result)
              return result
            }
          }
        }
      }
    }
  },
  transpileDependencies: ['vuetify']
}

但我的想法是让json中的入口点不是scss文件

提前谢谢你