一:关于vue-loader
1.在讲如何在vue项目中使用scss之前，我们先来简单了解一个概念，那就是vue-loader。vue-loader是什么东西呢？vue-loader其实就是一个webpack的loader。用来把vue组件转换成可部署的js,html,css模块。所以我们如果要想再vue项目中使用scss,肯定要告诉vue-loader怎么样解析我的scss文件。
二.引入sass/scss(less同理)
1.在webpack中，所有预处理器都要匹配相应的loader,vue-loader允许其他的webpack-loader处理组件中的一部分代码，然后它根据lang属性自动判断出要使用的loaders。所以，其实只要安装处理sass/scss的loader。就能在vue中使用scss了。
现在我们来安装sass/scss loader
cnpm install sass-loader node-sass --save-dev
安装后,有的时候无需配置,vue-loader允许能根据lang属性自动判断出要使用的loaders;
如果不生效,则需要在webpack.base.conf.js中增加以下配置.
{
test: /\.scss$/,
loaders: ["style","css","sass"]
},
2.vue2.0 使用scss
引入sass/scss文件
@import"./common/scss/mixin";
注意:分号必须要加,否则会报错,报这个错""Media query expression must begin with '('""
三.引入stylus
1.张鑫旭stylus语法文档
https://www.zhangxinxu.com/jq/stylus/
2.下载stylus
npm install stylus stylus-loader --save-dev
@import"assets/base.styl";
#app {
font-family:'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color:#2c3e50;
}
3.关于stylus
在SaaS，Less和Stylus中，为什么选择后者呢？因为Stylus是来源于Node.js社区，与js关系密切，所以基于Vue.js的开发，我们选择使用Stylus。
四.三个css预处理框架比较(Sass、LESS 和 Stylus)
https://www.oschina.net/question/12_44255?sort=default&p=4
https://blog.csdn.net/zhouziyu2011/article/details/67646875
五.引入normalize.css
Normalize.css只是一个很小的css文件，但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的css reset，Normalize.css是一种现代的，为HTML5准备的优质替代方案。Normalize.css现在已经被用于Twitter Bootstrap，HTML5 Boilerplate，GOV.UK，Rdio，CSS Tricks以及许许多多其他的框架，工具和网站上。
https://www.jianshu.com/p/3d21d1932aa0
https://www.cnblogs.com/chunlei36/p/6494533.html
cnpm i normalize.css --save
在main.js中添加
import 'normalize.css';
六.引入font-awesome 字体图标
cnpm install font-awesome --save
在main.js里添加
import 'font-awesome/css/font-awesome.css'