這篇文章主要介紹了詳解Vue-cli 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 } }到這裡為止安裝就完成了
module.exports = { entry: { app: './src/main.js', rem: './src/assets/js/viewport.js' } }上面是我整理給大家的,希望今後會對大家有幫助。 相關文章:
##
以上是詳解Vue-cli webpack行動端自動化建置rem問題的詳細內容。更多資訊請關注PHP中文網其他相關文章!