在vue2.x項目使用flexible.js和sass

1.首先建立一個vue項目：

vue init webpack myproject

2.安裝完成後進入項目

cd myproject
npm install

3.使用flexible.js適配

安裝lib-flexible：

npm install lib-flexible --save

在main.js裏引入：

import 'lib-flexible/flexible'

4.將px自動轉爲rem

安裝postcss-px2rem：

npm install postcss-px2rem --save-dev

在webpack.dev.conf.js的plugins裏添加代碼：

new webpack.LoaderOptionsPlugin({
  vue: {
    postcss: [require('postcss-px2rem')({remUnit: 75})]
  },
})

remUnit的值可根據設計稿自行修改，通常750的圖就設置成75，這樣寫750px就正好是100%寬度。

5.使用sass

安裝依賴：

npm install sass-loader node-sass --save-dev

在webpack.base.conf.js的rules裏添加代碼：

{
  test: /\.sass$/,
  loaders: ['style', 'css', 'sass']
}

在.vue文件裏：

<style lang="scss">

這樣就能夠使用sass了~