1. 程式人生 > >vue+webpack把px轉化成rem的實戰例子

vue+webpack把px轉化成rem的實戰例子

第一,首先需要本地安裝node環境和配置。

第二,npm全域性安裝vue-cli。

第三,通過vue的腳手架初始化本地專案

vue init webapck  project-name

這裡會自動安裝基礎依賴,先npn run dev一下,是否執行正常!

第四,安裝 npm install   postcss-px2rem postcss  postcss-loader--save 

第五,需要在webpack.base.conf.js檔案新增配置

首先引入這三個模組

const webpack = require('webpack')

const px2rem = require('postcss-px2rem')

const postcss = require('postcss')

其次在module中新增如下程式碼

plugins: [

new webpack.LoaderOptionsPlugin({

// webpack 2.0之後, 此配置不能直接寫在自定義配置項中, 必須寫在此處

vue: {

postcss: [require('postcss-px2rem')({ remUnit: 37.5, propWhiteList: [] })]

},

})

]

最後在rules中新增postcss-loader支援

{
        test: /\.(css|less|scss)(\?.*)?$/,
        loader: 'style-loader!css-loader!postcss-loader'
}

完整配置程式碼如下:

'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')

//這裡是新新增的

const webpack = require('webpack')

const px2rem = require('postcss-px2rem')
const postcss = require('postcss')

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('media/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      },

    //這裡是新新增的
      {
        test: /\.(css|less|scss)(\?.*)?$/,
        loader: 'style-loader!css-loader!postcss-loader'
      }
    ]
  },

 //這裡是新新增的
  plugins: [
    new webpack.LoaderOptionsPlugin({
        // webpack 2.0之後, 此配置不能直接寫在自定義配置項中, 必須寫在此處
        vue: {

           //這裡預設remUnit:是75,這裡用37.5,一般設計搞是按ios6設計的。
            postcss: [require('postcss-px2rem')({ remUnit: 37.5, propWhiteList: [] })]
        },
    })
  ],
  node: {
    // prevent webpack from injecting useless setImmediate polyfill because Vue
    // source contains it (although only uses it if it's native).
    setImmediate: false,
    // prevent webpack from injecting mocks to Node native modules
    // that does not make sense for the client
    dgram: 'empty',
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
    child_process: 'empty'
  }
}

第六,在index.html的head中引入 lib-flexible檔案,具體程式碼百度,拿來直接用即可。

第七,測試配置是否生效

在HelloWorld.vue元件中修改樣式

h1, h2 {
  font-weight: normal;
  font-size: 20px;  
}

修改完以後在瀏覽器檢視已生效,到此就大工告成。別忘了點個訂閱哦!!!  

相關推薦

vue+webpackpx化成rem實戰例子

第一,首先需要本地安裝node環境和配置。 第二,npm全域性安裝vue-cli。 第三,通過vue的腳手架初始化本地專案 vue init webapck  project-name 這裡會自動安裝基礎依賴,先npn run dev一下,是否執行正常! 第四,安裝

移動端自動將px化成rem

$browser-default-font-size: 37.5px !default; //變數的值可以根據自己需求定義 @function pxTorem($px) { //$px為需要轉換

Vue-cli 將px化為rem,適配移動端(vue-cli2.x 和 vue-cli3中的使用)

一. Vue-cli2.x中的用法 1.下載lib-flexible 我使用的是vue-cli+webpack,所以是通過npm來安裝的 npm i lib-flexible --save 2.引入lib-flexible 在main.js中引入lib-flexib

vue.js將px化為rem

1.下載lib-flexible 我使用的是vue-cli+webpack,所以是通過npm來安裝的 npm i lib-flexible --save 2.引入lib-flexible 在main.js中引入lib-flexible import 'lib-fl

用XStreamMap化成xml的例子

Dear reader, I am writing an article today on how to convert a Map to XML and Vice-versa in Java. I have tried to put nested Map examples too, which is se

Vue+webpack移動端: 將px化為rem,適配各種機型

該配置基於node環境,vue-cli+webpack 1.下載lib-flexible npm i lib-flexible --save 2.引入lib-flexible 在main.j

vue + webpack + px2rem px自動轉為rem

在專案中px自動轉為rem第一步安裝   npm install   postcss-px2rem postcss --save  第二步  在 webpack.base.conf.js中 引入const webpack = require('webpack')const p

vue打包的時候自動將pxrem的操作方法

px2rem-loader 需要與 flexible 配合使用,不然px2rem僅僅只是轉成rem卻不會設定rem的資訊 安裝 flexible npm i lib-flexible -S 然後在main.js中引入 import ‘lib-flexible/flexible

Vue:將px化為rem,適配移動端vant-UI等框架(px2rem-loader)

轉載:https://www.cnblogs.com/WQLong/p/7798822.html 1.下載lib-flexible 使用的是vue-cli+webpack,通過npm來安裝的 npm i lib-flexible --save 2.引入lib-flexible 在main.

手機端設計稿640px和750px不同設計稿下,px化成rem

(function(doc, win) {     var docEl = doc.documentElement,         resizeEvt = 'orientationchange' in window ? 'orientationchange' : '

Vue:將px化為rem,適配移動端

1.下載lib-flexible我使用的是vue-cli+webpack,所以是通過npm來安裝的npm i lib-flexible --save2.引入lib-flexible在main.js中引入lib-flexibleimport 'lib-flexible/flex

px2rem-loader(Vue:將px化為rem,適配移動端)

轉載:https://www.cnblogs.com/WQLong/p/7798822.html 1.下載lib-flexible 使用的是vue-cli+webpack,通過npm來安裝的 npm i lib-flexible --save 2.引入lib-flexible 在

60.Vue:將px化為rem,適配移動端

1.下載lib-flexible 我使用的是vue-cli+webpack,所以是通過npm來安裝的 npm i lib-flexible --save 2.引入lib-flexible 在main.js中引入lib-flexible import 'lib-flexible/fle

使用vue-cli腳手架工具搭建vue-webpack項目()

後臺 .org 開發 tab targe rip 自動 模塊化 num  對於Vue.js來說,如果你想要快速開始,那麽只需要在你的html中引入一個<script>標簽,加上CDN的地址即可。但是,這並不算是一個完整的vue實際應用。在實際應用中,我們必須要一

spark1.6使用:讀取本地外部資料,RDD化成DataFrame,儲存為parquet格式,讀取csv格式

一、先開啟Hadoop和spark 略 二、啟動spark-shell spark-shell --master local[2] --jars /usr/local/src/spark-1.6.1-bin-hadoop2.6/libext/com.mysql.jdbc.Driver.j

Effective_STL 學習筆記(二十七) 用 distance 和 advance const_iterator 化成 iterator

  並不存在從 const_iterator 到 iterator 之間的隱式轉換 一種安全的、可移植的方法獲取他所對應的 iterator: 1   typedef deque<int> IntDeque;     // 方便的typedef 2   typedef Int

spark讀取日誌檔案,RDD化成DataFrame

一、先開啟Hadoop和spark 略 二、啟動spark-shell spark-shell --master local[2] --jars /usr/local/src/spark-1.6.1-bin-hadoop2.6/libext/com.mysql.jdbc

利用Gsonjson化成Java List異常問題

Java.lang.ClassCastException: com.google.gson.internal.LinkedTreeMap cannot be cast to ….. 我需要把一串json轉化成Java List 最初是這樣寫的: private List<Co

java物件化成流,和流轉化成物件(包含clone機制+序列化機制)

類如下,這裡為了測試 僅僅用了內部類class Book implements Serializable { int i = 1; }物件轉化成位元組Book b = new Book(); B

sass中轉化為px化為rem的使用

利用sass加實時監聽編譯CSS。 可自動將px轉換為rem SASS函式:(使用時直接呼叫函式)例如:@function torem($px){//$px為需要轉換的字號 @return $p