如何在vue-cli生成的webpack模板中添加和使用scss？

Question

前端小白，我想在vue-cli生成的webpack模板中使用bootstrap并用scss来编写样式。但是模板中的WebPack配置太多，我直接蒙逼了。而且scss-loader的README也仅仅给出了一点点WebPack配置，和vue生成的模板相比大相径庭。所以大神们能不能详细说说，应该添加什么包，然后编辑那个文件？

我现在照着人家的README添加了scss-loader和node-sass，然后尝试在main.js中写入下面一行。

import './assets/css/site.scss'

scss文件是这么写的，然后不管是运行还是打包vue，果不其然的都失败了……

@import "~bootstrap/scss/bootstrap.scss";

.color-animate {
  animation: color-transition 10s ease 2s infinite;
}

@keyframes color-transition {
  0% {
    color: $red;
  }
  25% {
    color: $orange;
  }
  50% {
    color: $teal;
  }
  75% {
    color: $blue;
  }
  100% {
    color: $purple;
  }
}

Answer 1

不用配置，vue-cli已经配置好了，安装sass-loader和node-sass就行了，然而国内下不了node-sass这个包，只能用淘宝镜像