首頁 web前端 js教程 webpack行動端自動化建置rem步驟詳解

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

May 02, 2018 am 10:26 AM
web webpack 自動化

這次帶給大家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

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

理解SpringBoot和SpringMVC之間的差異及比較 理解SpringBoot和SpringMVC之間的差異及比較 Dec 29, 2023 am 09:20 AM

對比SpringBoot與SpringMVC,了解它們的差異隨著Java開發的不斷發展,Spring框架已經成為了許多開發人員和企業的首選。在Spring的生態系中,SpringBoot和SpringMVC是兩個非常重要的組件。雖然它們都是基於Spring框架的,但在功能和使用方式上卻有一些區別。本文將聚焦在SpringBoot與Sprin

蘋果快速指令自動化怎麼刪掉 蘋果快速指令自動化怎麼刪掉 Feb 20, 2024 pm 10:36 PM

蘋果快捷指令自動化怎麼刪掉隨著蘋果推出iOS13新系統,用戶可以利用快捷指令(AppleShortcuts)來自訂和自動化各種手機操作,大大提升了用戶的手機使用體驗。然而,有時候我們可能會需要刪除一些不再需要的快速指令。那麼,蘋果快捷指令自動化怎麼刪掉呢?方法一:透過快速指令應用刪除在iPhone或iPad上,開啟「快速指令」應用程式。在底部導覽列中選

PHP 持續整合中的 Jenkins:建置和部署自動化大師 PHP 持續整合中的 Jenkins:建置和部署自動化大師 Feb 19, 2024 pm 06:51 PM

在現代軟體開發中,持續整合(CI)已成為提高程式碼品質和開發效率的重要實踐。其中,jenkins是一個成熟且功能強大的開源CI工具,特別適用於PHP應用程式。以下內容將深入探討如何使用Jenkins實現php持續集成,並提供具體的範例程式碼和詳細的步驟。 Jenkins安裝和設定首先,需要在伺服器上安裝Jenkins。透過其官網下載並安裝最新版本即可。安裝完成後,需要進行一些基本配置,包括設定管理員帳戶、外掛程式安裝和作業配置。建立一個新作業在Jenkins儀表板上,點選"新作業"按鈕。選擇"Frees

web標準是什麼東西 web標準是什麼東西 Oct 18, 2023 pm 05:24 PM

Web標準是一組由W3C和其他相關組織制定的規範和指南,它包括HTML、CSS、JavaScript、DOM、Web可訪問性和性能優化等方面的標準化,透過遵循這些標準,可以提高頁面的兼容性、可訪問性、可維護性和效能。 Web標準的目標是使Web內容能夠在不同的平台、瀏覽器和裝置上一致地展示和交互,提供更好的使用者體驗和開發效率。

如何從駕駛艙Web使用者介面啟用管理訪問 如何從駕駛艙Web使用者介面啟用管理訪問 Mar 20, 2024 pm 06:56 PM

Cockpit是一個面向Linux伺服器的基於Web的圖形介面。它主要是為了使新用戶/專家用戶更容易管理Linux伺服器。在本文中,我們將討論Cockpit存取模式以及如何從CockpitWebUI切換Cockpit的管理存取。內容主題:駕駛艙進入模式查找當前駕駛艙訪問模式從CockpitWebUI啟用Cockpit的管理訪問從CockpitWebUI禁用Cockpit的管理訪問結論駕駛艙進入模式駕駛艙有兩種訪問模式:受限訪問:這是駕駛艙的默認訪問模式。在這種存取模式下,您無法從駕駛艙Web用戶

web是什麼意思 web是什麼意思 Jan 09, 2024 pm 04:50 PM

web是全球廣域網,也稱為萬維網,是互聯網的一種應用形式。 Web 是一種基於超文本和超媒體的資訊系統,它允許使用者透過超連結在不同的網頁之間跳轉,從而瀏覽和獲取資訊。 Web 的基礎是互聯網,它使用統一、標準化的協定和語言,使得不同電腦之間能夠進行資料交換和資訊共享。

機器人和人工智慧如何實現供應鏈的自動化 機器人和人工智慧如何實現供應鏈的自動化 Feb 05, 2024 pm 04:40 PM

自動化技術正在廣泛應用於不同產業,尤其在供應鏈領域。如今,它已成為供應鏈管理軟體的重要組成部分。未來,隨著自動化技術的進一步發展,整個供應鏈和供應鏈管理軟體都將發生重大變革。這將帶來更有效率的物流和庫存管理,提高生產和交付的速度和質量,進而促進企業的發展和競爭力。有遠見的供應鏈參與者已經準備好應對新形勢。資訊長應帶頭確保組織取得最佳結果,了解機器人技術、人工智慧和自動化在供應鏈中的作用至關重要。什麼是供應鏈自動化?供應鏈自動化是指利用技術手段減少或消除人類在供應鏈活動中的參與。它涵蓋了各種不同

PHP在Web開發中是屬於前端還是後端? PHP在Web開發中是屬於前端還是後端? Mar 24, 2024 pm 02:18 PM

PHP在Web開發中是屬於後端。 PHP是一種伺服器端腳本語言,主要用於處理伺服器端的邏輯,產生動態網頁內容。與前端技術相比,PHP更多地用於與資料庫互動、處理使用者請求以及生成頁面內容等後端操作。接下來透過具體的程式碼範例來說明PHP在後端開發中的應用。首先,我們來看一個簡單的PHP程式碼範例,用於連接資料庫並查詢資料:

See all articles