移動端適配webpack配置px轉rem或vh，vw

移動端適配常用百分比，rem，後來又多了一個vh，vw。當然在less，sass可以寫計算規則來轉換px，比較麻煩，打包一次搞定就好

px轉rem的配置
安裝依賴

npm install px2rem-loader -D --save

配置loader

var px2remLoader = {
	loader: 'px2rem-loader',
	options: {
		remUnit: 75
	}
}

完整如下

exports.cssLoaders = function (options, booLocal) {
	options = options || {};
	var cssLoader = {
		loader: 'css-loader',
		options: {
			sourceMap: options.sourceMap,
			modules: true,
			localIdentName: '[local]--[hash:base64:6]',	//class 名字 代替
			localIdentName: booLocal ? '[local]' : '[local]--[hash:base64:6]',	//class 名字 代替
			onlyLocals: true,
			importLoaders: 1,
		}
	};
	// px 轉換成rem
	var px2remLoader = {
		loader: 'px2rem-loader',
		options: {
			remUnit: 75
		}
	}
	
	var postcssLoader = {
		loader: 'postcss-loader',
		options: {
			plugins: [
				require('autoprefixer')({
					browsers: ['last 5 versions']
				})
			]
		}
	};
	function generateLoaders(loader, loaderOptions) {
		var loaders = [cssLoader, postcssLoader, px2remLoader];
		if (loader) {
			let option = {
				...loaderOptions,
				sourceMap: options.sourceMap,
			};

			loaders.push({
				loader: loader + '-loader',
				options: option
			});
		}

		if (options.extract) {
			if (process.env.NODE_ENV === 'production') {
				return [MiniCssExtractPlugin.loader].concat(loaders);
			} else {
				return ExtractTextPlugin.extract({
					use: loaders,
					publicPath: '../../', //解決 build css bg img 加載路徑不對問題
					fallback: 'react-style-loader' // react-style-loader
				});
			}

		} else {
			return ['react-style-loader'].concat(loaders);
		}
	}

	return {
		css: generateLoaders(),
		postcss: generateLoaders('postcss'),
		less: generateLoaders('less', { javascriptEnabled: true }),
		sass: generateLoaders('sass', { indentedSyntax: true }),
		scss: generateLoaders('sass'),
		stylus: generateLoaders('stylus'),
		styl: generateLoaders('stylus'),
	};
};

exports.styleLoaders = function (options) {
	var output = [];
	var loaders = exports.cssLoaders(options, false);
	for (var extension in loaders) {
		var loader = loaders[extension];
		output.push(
			{
				test: new RegExp('\\.' + extension  + '$'),
				use: loader,
			}
		);
	}
	return output;
};

效果圖

或者利用 postcss-pxtorem，postcss-loader下的插件

npm install postcss-pxtorem --save-dev

var postcssLoader = {
		loader: 'postcss-loader',
		options: {
			plugins: [
				require('autoprefixer')({
					browsers: ['last 5 versions']
				}),
				require('postcss-pxtorem')({
					'rootValue': 75,
					propList: ['*']
				})
			]
		}
	};

完整代碼

exports.cssLoaders = function (options, booLocal) {
	options = options || {};
	var cssLoader = {
		loader: 'css-loader',
		options: {
			sourceMap: options.sourceMap,
			modules: true,
			localIdentName: '[local]--[hash:base64:6]',	//class 名字 代替
			localIdentName: booLocal ? '[local]' : '[local]--[hash:base64:6]',	//class 名字 代替
			onlyLocals: true,
			importLoaders: 1,
		}
	};
	var postcssLoader = {
		loader: 'postcss-loader',
		options: {
			plugins: [
				require('autoprefixer')({
					browsers: ['last 5 versions']
				}),
				require('postcss-pxtorem')({
					'rootValue': 75,
					propList: ['*']
				})
			]
		}
	};
	function generateLoaders(loader, loaderOptions) {
		var loaders = [cssLoader, px2remLoader];
		if (loader) {
			let option = {
				...loaderOptions,
				sourceMap: options.sourceMap,
			};

			loaders.push({
				loader: loader + '-loader',
				options: option
			});
		}

		if (options.extract) {
			if (process.env.NODE_ENV === 'production') {
				return [MiniCssExtractPlugin.loader].concat(loaders);
			} else {
				return ExtractTextPlugin.extract({
					use: loaders,
					publicPath: '../../', //解決 build css bg img 加載路徑不對問題
					fallback: 'react-style-loader' // react-style-loader
				});
			}

		} else {
			return ['react-style-loader'].concat(loaders);
		}
	}

	return {
		css: generateLoaders(),
		postcss: generateLoaders('postcss'),
		less: generateLoaders('less', { javascriptEnabled: true }),
		sass: generateLoaders('sass', { indentedSyntax: true }),
		scss: generateLoaders('sass'),
		stylus: generateLoaders('stylus'),
		styl: generateLoaders('stylus'),
	};
};

exports.styleLoaders = function (options) {
	var output = [];
	var loaders = exports.cssLoaders(options, false);
	for (var extension in loaders) {
		var loader = loaders[extension];
		output.push(
			{
				test: new RegExp('\\.' + extension  + '$'),
				use: loader,
			}
		);
	}
	return output;
};

效果圖如上

px轉vw，vh
px轉vw，vh利用postcss-px-to-viewport

npm install postcss-px-to-viewport --save-dev

viewportWidth: 750, // 視窗寬度
viewportHeight: 1334,  // 視窗高度
unitPrecision: 6, 	// 保留小數
viewportUnit: 'vw', // 選擇單位
selectorBlackList: [], // 不轉換的類
minPixelValue: 1, // 最小單位
mediaQuery: false, 	// 排除媒體查詢
landscapeUnit: 'vh', // 橫屏時單位
fontViewportUnit: 'vw', // 字體使用的單位

在postcssLoader裏配置如下

var postcssLoader = {
		loader: 'postcss-loader',
		options: {
			plugins: [
				require('autoprefixer')({
					browsers: ['last 5 versions']
				}),
				// require('postcss-pxtorem')({
				// 	'rootValue': 75,
				// 	propList: ['*']
				// })
				require('postcss-px-to-viewport')({
					viewportWidth: 750, // 視窗寬度
					viewportHeight: 1334,  // 視窗高度
					unitPrecision: 6, 	// 保留小數
					viewportUnit: 'vw', // 選擇單位
					selectorBlackList: [], // 不轉換的類
					minPixelValue: 1, // 最小單位
					mediaQuery: false, 	// 排除媒體查詢
					landscapeUnit: 'vh', // 橫屏時單位
					fontViewportUnit: 'vw', // 字體使用的單位
				})
			]
		}
	};

xiao