vue全局引入scss(mixin)

要在Vue中全局引入SCSS mixin，需要以下步骤：

1. 安装sass-loader和node-sass

在Vue项目中使用SCSS需要先安装sass-loader和node-sass两个依赖包。

npm install sass-loader node-sass -D

2. 在vue.config.js中配置

在Vue项目根目录下新建vue.config.js文件，用于配置Vue项目相关的设置。在该文件中加入下面的内容：

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        //这里的选项可以用来全局导入样式变量和mixin
        additionalData: `@import "@/styles/tools.scss";`
      }
    }
  }
};

上面的代码中，我们将additionalData属性设置为需要全局导入的样式文件路径。在这个scss文件中，我们可以定义全局的mixin，但也可以定义全局的样式变量或者函数等。

3. 在组件中使用mixin

现在我们可以在Vue项目任何一个组件中使用定义的全局mixin了。例如，我们在SCSS mixin中定义了一个border-radius的mixins：

// tools.scss
@mixin radius($px) {
  border-radius: $px;
}

现在，在一个Vue单文件组件（例如App.vue）中，可以这样使用该mixin来设置圆角半径：

<template>
  <div class="test">Hello world</div>
</template>

<script>
export default {
  name: "App",
};
</script>

<style lang="scss">
.test {
  @include radius(50%);
}
</style>

示例二

我们在之前的示例中，为全局引入了一个mixin，那么如何在mixin中再引入其他的mixin呢？假设我们在项目中定义了一个名为buttons的mixin，它定义了不同类型的按钮样式。现在，我们可以在tools.scss文件中使用下面的方式引入此mixin：

// tools.scss
@import '@/styles/buttons.scss';

@mixin radius($px) {
  border-radius: $px;
  // 使用buttons中的mixin来定义不同尺寸的按钮
  @include btn-small;
}

在上面的代码中，我们在引入了buttons.scss文件后，就可以在radius mixin中使用其中的btn-small等类似的样式了。在实际项目中，通常会将不同类型的样式分别定义在不同的SCSS文件中，然后在tools.scss中导入它们，并组合使用。