vue2 项目使用scss预处理器

如果你想在Vue2项目中使用SCSS预处理器，你需要先安装相关的依赖包。可以使用以下命令来安装：

npm install node-sass sass-loader --save-dev

安装完成后，在你的Vue组件中可以使用SCSS语法编写样式，例如：

<template>
  <div class="container">
    <h1>{{ title }}</h1>
  </div>
</template>

<style lang="scss">
.container {
  width: 100%;
  height: 100%;
  background-color: $bg-color;
}
</style>

<script>
export default {
  data() {
    return {
      title: 'Hello World!'
    }
  }
}
</script>

在上面的例子中，我们使用了SCSS语法编写了一个.container样式，并且在其中使用了一个SCSS变量$bg-color。这个变量可以在其他样式中进行复用。

如果你想将全局的变量或混合器引入到你的Vue组件中，可以在vue.config.js文件中进行配置：

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

在上面的例子中，我们在scss选项中添加了prependData配置，使得我们可以引入全局的变量和混合器。这个配置会将variables.scss和mixins.scss文件引入到所有的Vue组件中。

希望这些信息能够帮助你使用SCSS预处理器。