首頁  >  文章  >  web前端  >  webpack行動端自動化建置rem步驟詳解

webpack行動端自動化建置rem步驟詳解

php中世界最好的语言
php中世界最好的语言原創
2018-05-02 10:26:492149瀏覽

這次帶給大家webpack行動端自動化建置rem步驟詳解,webpack行動端自動化建置rem的注意事項有哪些,以下就是實戰案例,一起來看一下。

相信很多小夥伴想著自己的行動裝置專案能夠自動轉換為rem,這才符合前端的潮流,如果用自己手寫或編輯器外掛來改動十分不方便還容易出錯,我在網路上找了很多的方法發現以下問題:

1 照著舊的影片教學去弄,發現node npm webpack px2rem的各種外掛程式版本都不一樣,根本沒用

2 網路上的教學缺斤少倆,不完整,搞得我整了半天搞不定,想想乾脆手動vscode 的cssrem設定算了,但老子還是不服氣,東拼西湊還是整出來了,最後還是研究出了以下方法希望對大家的行動端自動化建置rem有幫助

1 安裝vue-cli這個就不多說了,大家都應該會

#2 安裝和設定px2rem-loader(這裡沒有用postcss試過了很多問題還是決定用這個)

#第一步:npm install px2rem-loader

第二部: webpack.base.conf. js下新增對象,這裡我用的是sass,用其他的按照下面規律改就行了,相信都看得懂

module.exports={
module: {
  rules: [
   {
    test: /\.(css|less|scss)(\?.*)?$/,
    loader: 'style-loader!css-loader!sass-loader!less-loader!postcss-loader'
   }
  ]
 }
}

第三步: webpack.dev.conf.js下的plugins加一個東西,大家一定要注意remUnit這個屬性,就是在蘋果5情況下為40px,我這裡定為40,也有人定為80,我這裡40是為了配合hotcss使用下面我會講到

 plugins: [
  new webpack.LoaderOptionsPlugin({
   // webpack 2.0之后, 此配置不能直接写在自定义配置项中, 必须写在此处
   vue: {
    postcss: [require('postcss-px2rem')({ remUnit: 40, propWhiteList: [] })]
   }
  }
 ]

第四部:這是多人不知道的,很多人就是差這一步,utils.js下找到const cssLoader加上?importLoaders=1

 const cssLoader = {
  loader: 'css-loader?importLoaders=1',
  options: {
   minimize: process.env.NODE_ENV === 'production',
   sourceMap: options.sourceMap
  }
 }

到這裡為止安裝就完成了

輸入font-size:40px

輸出font-size:1rem (在iphone下)

3 我們都知道裝置的像素比不一樣的,所以我們用hotcss來調整設備的像素比鏈接

我放在了src/assets/js/裡面大家可根據習慣來

引入方法,自己定義什麼名字都行,這裡我吧hotcss.js改為了viewport.js

module.exports = {
 entry: {
  app: './src/main.js',
  rem: './src/assets/js/viewport.js'
 }
}

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

React Router v4使用詳解

#vue表單入門使用須知

#

以上是webpack行動端自動化建置rem步驟詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn