在vue2项目中使用sass

在 Vue 2 项目中使用 Sass 需要先安装相应的依赖。

1. 安装 `node-sass` 和 `sass-loader`：

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

2. 在 `vue.config.js` 中配置 Sass：

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `
          @import "@/assets/styles/_variables.scss";
          @import "@/assets/styles/_mixins.scss";
        `
      }
    }
  }
};

这里的 `prependData` 选项用于向 Sass 文件中添加全局变量和混合器。你可以根据自己的需要进行修改。

3. 在 Vue 组件中使用 Sass：

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

<style lang="scss">
.example {
  h1 {
    color: $primary-color;
  }
}
</style>

在 `style` 标签中使用 `lang="scss"` 来指定样式语言为 Sass。然后就可以像上面的例子一样使用 Sass 了。

注意：需要重启项目才能生效。