尝鲜使用vue-cli 3.0.0-beta.6，很容易就可以完成scss到vue项目中。
vue-cli 3提供了两种方式集成sass/scss：
创建项目是选择预处理器sass
手动安装sass-loader
创建项目选择预处理器sass
$ vue create vuedemo
? Please pick a preset: (Use arrow keys)
default (babel, eslint)
Manually select features
移动上下键选择“Manually select features”：表示手动选择创建项目的特性。
显示如下：
? Check the features needed for your project: (Press to select, to t
oggle all,to invert selection)
( ) TypeScript
( ) Progressive Web App (PWA) Support
( ) Router
( ) Vuex
(*) CSS Pre-processors
( ) Linter / Formatter
( ) Unit Testing
( ) E2E Testing
移动上下键在CSS Pre-processors，按提示点击空格键选择CSS-processors。
显示如下：
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
SCSS/SASS
LESS
Stylus
选择第一个SCSS/SASS作为我们的CSS预处理器。
完成后项目会帮我们安装sass-loader node-sass。
手动安装
如果在创建项目没有选择CSS 预处理器，我们也可以手动安装sass-loader node-sass来集成scss。
# Sassnpm install -D sass-loader sass# Lessnpm install -D less-loader less# Stylusnpm install -D stylus-loader stylus
使用
至此我们只需要在style指定lang为scss即可：
<style lang="scss">$color = red;</style>
vue service clie会自动使用我们安装的sass-loader作为scss内容的加载器。
vue cli是基于webpack构建项目，如果想对sass-loader传递一些配置项，可以在vue.config.js配置。在项目的根目录下如果没有找到vue.config.js，手动创建即可。如下：
// vue.config.js
const fs = require('fs')module.exports = {css: {loaderOptions: {sass: {data: fs.readFileSync('src/variables.scss', 'utf-8')}}}}
这个文件variables.scss也是可以通过import在.vue组件里引入。
