28. css样式中px转rem

Vue3:脚手架配置

https://blog.csdn.net/weixin_41424247/article/details/80867351

与原来的vue-cli 2.x版本不同的是：如果使用最新版本的@vue/cli初始化vue项目时，通常看不到webpack的配制文件。而在原来的2.x版本，我们可以在utils.js中轻松配制px2rem相关配置。

1. 安装

安装lib-flexible：

npm i -S lib-flexible

npm i -D postcss postcss-loader postcss-px2rem

2. 在项目入口文件main.js中引入lib-flexible

import ‘lib-flexible/flexible.js‘

3.在项目public目录的index.html头部加入手机端适配的meta的代码

4.在根目录下创建配制文件vue.config.js，并配制如下信息

vue.config.js

module.exports = { ???css: { ???????loaderOptions: { ???????????css: { ???????????????// options here will be passed to css-loader ???????????}, ???????????postcss: { ???????????????// options here will be passed to postcss-loader ???????????????plugins: [require(‘postcss-px2rem‘)({ ???????????????????remUnit: 75 ???????????????})] ???????????} ???????} ???}}

res:

注:

1.remUnit在这里要根据lib-flexible的规则来配制，如果您的设计稿是750px的，用75就刚刚好。

2.当你遇到1px的边框时，通常容易发现页面缺失部分边框，这时你可以使用/no/语法来屏蔽该属性转换，例如

border: 1px solid red; /*no*/

3.由于字体的特殊性，我们在编译font-size属性时，通常不使用rem单位，这时候你可以这样使用：

font-size: 24px; /*px*/

原生配置:

1. 安装

安装css文件打包插件

cnpm i -D MiniCssExtractPlugin css-loader

安装lib-flexible：

cnpm i -S lib-flexible

安装postcss和postcss-loader和postcss-px2rem：

cnpm i -D postcss postcss-loader postcss-px2rem

2. 在项目入口文件main.js中引入lib-flexible

main.js

import‘lib-flexible/flexible.js‘;

3.在项目public目录的index.html头部加入手机端适配的meta的代码

4. 在根目录下创建配制文件vue.config.js，并配制如下信息

vue.config.js

const path = require("path");const HtmlWebpackPlugin = require("html-webpack-plugin");const CleanWebpackPlugin = require("clean-webpack-plugin"); const VueLoaderPlugin = require(‘vue-loader/lib/plugin‘); const MiniCssExtractPlugin = require(‘mini-css-extract-plugin‘);const px2rem = require(‘postcss-px2rem‘);function resolve (dir) { ???return path.join(__dirname,dir)}module.exports= { ???mode:"development", ???entry:"./src/main.js", ???output:{ ???????path:path.resolve(__dirname,"./dist"), ???????filename:"main.bundle.js" ???}, ???resolve :{ ???????extensions: [‘.js‘, ‘.vue‘, ‘.json‘,".css"], ????????alias: { ??????????‘vue$‘: ‘vue/dist/vue.esm.js‘, ??????????‘@‘: resolve(‘src‘), ????????} ???}, ???devServer:{ ???????contentBase:"./dist", ???????port:9000, ???????open:true, ???}, ???plugins:[ ???????new VueLoaderPlugin(), ???????new HtmlWebpackPlugin({ ???????????template:"./public/index.html", ???????????filename:"index.html" ???????}), ???????new CleanWebpackPlugin([‘./dist‘]), ???????new MiniCssExtractPlugin({ ?????????filename: "color.css", ????????// chunkFilename: "[id].css" ???????}) ???], ???module:{ ???????rules:[ ???????????{ test: /\.vue$/, loader: ‘vue-loader‘}, ???????????//{test:/\.css$/,use:[‘style-loader‘,‘css-loader‘]}, ???????????{ ???????????????test:/\.css$/, ???????????????exclude:/node_modules/, ???????????????use:[ ???????????????????MiniCssExtractPlugin.loader, ???????????????????‘css-loader‘, ???????????????????{ ???????????????????????loader:"postcss-loader", ???????????????????????options:{ ???????????????????????????plugins:()=>[ ????????????????????????????????px2rem({remUnit: 75}) ???????????????????????????] ???????????????????????} ???????????????????}, ???????????????] ???????????}, ???????????{ ???????????????test:/\.js$/, ???????????????exclude:/(node_modules|bower_components)/, ???????????????use:[‘babel-loader‘] ???????????}, ???????????{ ???????????????test:/(png|gif|jp(e)?g)$/, ???????????????use:[ ???????????????????{ ???????????????????????loader:‘url-loader‘, ???????????????????????options:{ ???????????????????????????limit:8192 ???????????????????????} ???????????????????} ???????????????] ???????????} ???????] ???}}

res:

参考资料:

postcss-px2rem: https://www.npmjs.com/package/postcss-px2rem

mini-css-extract-plugin:https://webpack.js.org/plugins/mini-css-extract-plugin/#src/components/Sidebar/Sidebar.jsx

https://blog.csdn.net/mx18519142864/article/details/80771700

{ ???test: /\.css$/, ???exclude: /node_modules/, ???use: [ ???????????MiniCssExtractPlugin.loader, ??????"css-loader", ???// ??"postcss-loader" ?????{ ?????????loader:"postcss-loader", ?????????options:{ ?????????????plugins:()=>[ ??????????????px2rem({remUnit: 75}) ???????????] ?????????} ?????}, ?????????]},

28. css样式中px转rem

原文地址：https://www.cnblogs.com/zhongchao666/p/9497511.html