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+webpack把px轉化成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
用XStream把Map轉化成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打包的時候自動將px轉成rem的操作方法
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
利用Gson把json轉化成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