在vue-cli中使用scss以及flexible.debug

使用scss詳細步驟：

　　1.安裝

　　npm install node-sass --save-dev

　　npm install sass-loader --save-dev

　　2.webpack.base.config.js在loaders裏面加上

　　{ 　　test: /\.scss$/, 　　 loaders: ["style", "css", "sass"] 　}
　3.在頁面中使用

　　<style lang="scss" scoped></style>

安裝flexible.debug
　　1.安裝lib-flexible
　　　　npm i lib-flexible --save

　　   2.在項目入口文件main.js中引入lib-flexible

　　　　import 'lib-flexible/flexible.js'

　　   3.安裝px2rem-loader

　　　　npm install px2rem-loader

　　   4.在utils中配置，加入

　　　　const px2remLoader = {

　　　　　　loader: 'px2rem-loader',

　　　　　　options: {

　　　　　　　　remUnit: 75

　　　　　　}

　　　　}

　　這裏的75是根據設計寫的，若是你的設計圖爲750，那麼這裏就應該填寫75，也就是1/10

　　

　　在function generateLoaders 這個方法中 

　　原來的：const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]

　　替換成：const loaders = [cssLoader,px2remLoader]

　　5.而後重啓後 ，在組件中寫單位直接寫px  而後在瀏覽器中的檢查就能夠看到  單位是rem