整理一下vuejs要使用sass的一些自己需要注意的点：

依赖包

首先用vue create创建的话，如果当时自定义安装了sass，则相关依赖会被自动配置。如果没有的话，用下面的命令安装

npm install -D sass-loader node-sass

光看名字的话，感觉似乎sass-loader就够用了。但是还有个node-sass，这点。在sass-loader的官方文档中有说：

也就说sass-loader要求必须还要安装node sass（或其他）。这允许你去控制依赖的版本并选择sass的具体实现。

如何全局引入mixin和variable文件

对于一般的sass定义样式的文件，直接用@import就可以全局引入使用，但是对于mixin和variable这样没有定义样式的文件，全局直接用import是无用的，不过局部组件@import是ok的。 例如：

@import '@/assets/scss/variable.scss';

要全局引用的话，需要配置vue.config.js文件。

css: {
  loaderOptions: {
    sass: {
      additionalData: ` 
        @import "@/assets/scss/variable.scss";
        @import "@/assets/scss/mixin.scss";
      `
    // use `prependData` here if sass-loader version = 8, or
    // `data` if sass-loader version < 8
    }
  }
}

vue官方文档上又说， sass-loader版本 小于8时，需要用data而不是additionalData

@import的路径问题

根据sass-loader的文档

1. @import "style.scss" 和@import "./style.scss" 是一样的。
2. 使用@import时，loader会先按照相对路径来理解，如果找不到，会到node modules里去找。
3. ～是已经过时的，所以不推荐使用，但它的使用还是有效的。～代表告知webpack需要到node modules中去找文件。