在 VueJS 组件中使用 sass 变量 [英] Using sass variables in a VueJS component

问题描述

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

I got a rather simple problem with a VueJS component that needs to use a variable. The problem comes with getting sass to register variables inside a component.

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

I tried importing the _variables.scss file containing my variables but to no luck. At this point any guidance is very much appreciated, or if there is another way for a component to inherit styling.

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

Gulpfile.js

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

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

app.scss

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

变量.scss

$primary-color: #BA2731; //Red

推荐答案

在每个组件中导入 _variables.scss 似乎是我目前找到的唯一解决方案(它应该可以工作，根据这个问题).

Importing the _variables.scss in every component seems to be the only solution I've found so far (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>

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

As you are only going to include variables, this shouldn't be a problem.

但正如问题中提到的，一个警告:你应该只在每个组件中包含抽象实体(变量、扩展、混合)，没有具体的 CSS 规则.

But as mentioned in the issue, a word of caution: You should only include abstract entities (variables, extends, mixins) into every component, no concrete CSS rules.

这篇关于在 VueJS 组件中使用 sass 变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！