javascript - 在Vue组件中使用.scss颜色变量

Question

我可以为按钮创建一个scss类并在那里设置颜色，但是当所有的scss类要做的就是设置颜色时，这似乎是多余的工作。我的问题是我可以在组件中以某种方式设置颜色而不必创建组件并为其设置类吗？

//my scss variables. They are in a _variables.scss file.
$t_light: #efefed;
$primary: #61B4C6;
$med_primary: #354063;
$dk_primary: #222f34;
$info: #647373;
$success: #52b173;
$warning: #d0a03b;
$danger: #f44336;

//something like this. This is in the Login.vue file.
<v-btn
    color="primary"
    @click="submit">Login
</v-btn>

编辑
Webpack

const mix = require('laravel-mix');
const path = require('path');

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .webpackConfig({
        output: { chunkFilename: 'js/[name].js?id=[chunkhash]' },
        resolve: {
            alias: {
                vue$: 'vue/dist/vue.runtime.esm.js',
                '@': path.resolve('resources/js'),
            },
        },
    })
    .babelConfig({
        plugins: ['@babel/plugin-syntax-dynamic-import'],
    })
    .version();

Answer 1

基于此article，您需要如下导出sass变量

$t_light: #efefed;
$primary: #61B4C6;
$med_primary: #354063;
$dk_primary: #222f34;
$info: #647373;
$success: #52b173;
$warning: #d0a03b;
$danger: #f44336;

:export{
tLight:$t_light,;
primary:$primary;
....
}

然后将Sass文件( variables.scss)文件导入JavaScript，使您可以访问文件中定义的变量。

 import variables from './variables.scss';

在数据属性中，将变量添加为:

data(){
  return{
    variables
  };
}

模板

<v-btn
    :color="variables.primary"
    @click="submit">Login
</v-btn>