在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