在VueJS组件中使用sass变量

Question

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

我尝试导入_variables.scss包含我的变量的文件,但没有运气.在这一点上,非常感谢任何指导,或者如果组件有另一种方式来继承样式.

MyComponent.vue

<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";

variables.scss

$primary-color: #BA2731; //Red

Answer 1

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

<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规则.

Answer 2

假设您正在使用vue-cli，请尝试此操作。

如果尚未安装sass loader：

npm install -D sass-loader node-sass

然后在vue.config.js：

const path = require('path');

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `@import "@/pathto/variables.scss";`
      }
    }
  }
};

在您的组件中：

<style lang="sass">
    .my-color {
        color: $primary-color;
    }
</style>

资源：

将选项传递给预处理程序加载器

如何将sass文件导入每个vue组件

编辑：

从sass-loader 8开始，data需要为prependData（感谢@ ben-y指出这一点）：

const path = require('path');

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "@/pathto/variables.scss";`
      }
    }
  }
};

Answer 3

我正在使用sass-loader的最新版本 ( v9.0.2 )，prependData现在似乎不是一个选项。您可能想在vue-config.js. 请注意该additionalData选项正在被使用，因为不再有prependData选项。

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        additionalData: '@import "@/pathto/variables.scss";'
      }
    }
  }
}