在 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>

编辑 网页包

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>