laravel - 在 VueJS 组件中使用 sass 变量

Question

我在 VueJS 组件中遇到了一个相当简单的问题，它需要使用一个变量。问题在于让 sass 在组件内注册变量。

我尝试导入包含我的变量的 _variables.scss 文件，但没有成功。在这一点上，非常感谢任何指导，或者组件是否有另一种方法来继承样式。

我的组件.vue

<template>
    <div class="my-color"></div>
</template>
<style lang="sass">
    .my-color {
        color: $primary-color;
    }
</style>
<script>
    export default{
        data(){
            return {}
        }
    }
</script>

Gulp文件.js

var elixir = require('laravel-elixir');
require('laravel-elixir-vueify');

elixir(function(mix) {
    mix.browserify('main.js');
    mix.sass('app.scss');
});

应用.scss

@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
@import "modules/variables";

变量.scss

$primary-color: #BA2731; //Red

Answer 1

在每个组件中导入 _variables.scss 似乎是迄今为止我找到的唯一解决方案 (it should work, according to this issue)。

<template>
    <div class="my-color"></div>
</template>
<style lang="sass">
    @import 'path/to/your/_variable.scss'; // Using this should get you the variables
    .my-color {
        color: $primary-color;
    }
</style>
<script>
    export default{
        data(){
            return {}
        }
    }
</script>

因为您只打算包含变量，所以这应该不是问题。

但是正如问题中提到的那样，请注意:您应该只将抽象实体(变量、扩展、混合)包含到每个组件中，而不是具体的 CSS 规则。