注意：这种方式如果不想在下次构建vue项目时将sass作为默认配置选项写入项目开发依赖则在最后选择不作为未来配置项。

移动上下键选择“Manually select features”：表示手动选择创建项目的配置。

显示如下：

移动上下键在CSS Pre-processors，按提示点击空格键选择CSS-processors。

显示如下：

选择第二个SCSS/SASS作为我们的CSS预处理器。

完成后项目会帮我们自动安装sass-loader 以及 node-sass依赖。

如果在创建项目没有选择CSS 预处理器，我们也可以手动安装sass-loader以及 node-sass来集成scss。

至此我们只需要在style指定lang为scss即可：

vue service clie会自动使用我们安装的sass-loader作为scss内容的加载器。

假如现在我们已经将变量都定义在 variables.scss 文件上了，如果要在某个 .vue 文件里使用变量就要先将其引入。如：

但是这种方法不长久，如果我们每个组件都要引入，那不是每个 .vue 都要 @import 一次？这也太麻烦了。 所以应该考虑下面的sass全局引用讲解。

a.写在 App.vue 上（不推荐使用）

如果你写的是一个网站，那么肯定会用到 App.vue 这个文件。所以你可以在 App 这个组件里 @import。注意：不要在 App 组件里写 scoped ，这样引入的样式都会应用到每个组件上。

b.vue-cli 3全局配置，自动引入(推荐使用)

如果你想自动化导入文件 (用于颜色、变量、mixin……)，你可以使用 style-resources-loader 用命令行工具执行下面的代码

然后它会让你选择你使用的预处理器

 安装完成后选择你使用的预处理器，你可以在 vue.config.js （如果你没有这个文件，就在你的项目根目录里新建一个就行了）复制如下代码：

现在的 vue 已经将 /build/webpack.xxx.js 的 webpack 配置文件都隐藏起来了，而这个 vue.config.js 就像是 webpack.xxx.js 的总和，你可以配置 vue 提供的选项也可以混入 webpack 的配置。