一:關(guān)于vue-loader
1.在講如何在vue項目中使用scss之前泰演，我們先來簡單了解一個概念，那就是vue-loader。vue-loader是什么東西呢朝捆？vue-loader其實就是一個webpack的loader废亭。用來把vue組件轉(zhuǎn)換成可部署的js,html,css模塊国章。所以我們?nèi)绻朐賤ue項目中使用scss,肯定要告訴vue-loader怎么樣解析我的scss文件。
二.引入sass/scss(less同理)
1.在webpack中豆村，所有預(yù)處理器都要匹配相應(yīng)的loader,vue-loader允許其他的webpack-loader處理組件中的一部分代碼液兽，然后它根據(jù)lang屬性自動判斷出要使用的loaders。所以掌动，其實只要安裝處理sass/scss的loader四啰。就能在vue中使用scss了。
現(xiàn)在我們來安裝sass/scss loader
cnpm install sass-loader node-sass --save-dev
安裝后,有的時候無需配置,vue-loader允許能根據(jù)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.關(guān)于stylus
在SaaS粗恢，Less和Stylus中柑晒，為什么選擇后者呢？因為Stylus是來源于Node.js社區(qū)眷射，與js關(guān)系密切匙赞，所以基于Vue.js的開發(fā)，我們選擇使用Stylus妖碉。
四.三個css預(yù)處理框架比較(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文件，但它在默認(rèn)的HTML元素樣式上提供了跨瀏覽器的高度一致性嗅绸。相比于傳統(tǒng)的css reset脾猛，Normalize.css是一種現(xiàn)代的，為HTML5準(zhǔn)備的優(yōu)質(zhì)替代方案鱼鸠。Normalize.css現(xiàn)在已經(jīng)被用于Twitter Bootstrap猛拴，HTML5 Boilerplate，GOV.UK蚀狰，Rdio愉昆，CSS Tricks以及許許多多其他的框架，工具和網(wǎng)站上麻蹋。
http://www.reibang.com/p/3d21d1932aa0
https://www.cnblogs.com/chunlei36/p/6494533.html
cnpm i normalize.css --save
在main.js中添加
import 'normalize.css';
六.引入font-awesome 字體圖標(biāo)
cnpm install font-awesome --save
在main.js里添加
import 'font-awesome/css/font-awesome.css'
