我将需要一段时间才能找到使用具有 scss 值的 javascript 变量的解决方案。
让我解释一下我的问题。我使用 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)'
}
Run Code Online (Sandbox Code Playgroud)
这个文件是 vuetify 需要和使用的两个创建自定义颜色值并且完美运行。
第二个是一个简单的 scss 文件:
// Theme colors
$color-primary-base: #4d7cff;
$color-primary-dark: #2756d8;
$color-primary-light: #96b0fb; …Run Code Online (Sandbox Code Playgroud)