在 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 似乎是迄今为止我找到的唯一解决方案 (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 规则。

Answer 2

对于我的项目，我使用了 Vue CLI webpack，这是一个对我有用的解决方案。

我在 App.vue 文件中管理我所有的 SCSS。在我的每个 Component.vue 中，我停止使用 <style></style> 并开始创建一个单独的 component.scss.

所以我的 src 文件夹看起来像：

 /src
     /assets
     /components
         /compA
             CompA.vue
             compA.scss
         /compB
             CompB.vue
             compB.scss
    App.vue
    main.js

我的App.vue长得像

<template> ... </template>

<script> ... </script>

<style lang="less">
    //Bootstrap
    @import "../node_modules/bootstrap-sass/assets/stylesheets/bootstrap";

    //Components
    @import "components/compA.scss";
    @import "components/compB.scss";
</style>

此设置的优点是可以在一个位置管理所有样式，并且还能够使用所有 bootstrap 变量和混入。

注：

这只是在 Vue 中使用 SASS 变量的另一种选择。

我走这条路是因为当我在我的所有组件中导入 Boostrap SCSS 时，我的应用程序的大小一直在增长。如果我只导入变量，则增加可以忽略不计，但是当我导入整个 Boostrap SCSS 时，增加变得非常显着。我这样做是为了使用混入并扩展一些现有样式。

Answer 3

假设您正在使用 vue-cli，试试这个。

如果您还没有安装 sass 加载程序：

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-loader 8 开始，data 需要是 prependData（感谢 @ben-y 指出这一点）：

const path = require('path');

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

Answer 4

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

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

Answer 5

对我来说 none 上面的解决方案有效 (sass-loader 9.0.3) 但这个确实有效：

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

在 VueJS 组件中使用 sass 个变量

Using sass variables in a VueJS component

sass

laravel

vue.js

laravel-elixir

MyComponent.vue

Gulpfile.js

app.scss

variables.scss