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})
]
}
},
]
},
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- 网络工程师提高篇 | 路由重发布你了解多少?从原理到配置,瑞哥带你学习一波!
- Python 为什么不支持 switch 语句?
- 2019河南科技学院发现杯
- 排序算法之希尔排序
- 排序算法之快速排序
- 干货 | Oracle数据库操作命令大全,满满的案例供你理解,收藏!
- 【2万字长文】深入浅出主流的几款小程序跨端框架原理
- 关于动态规划的练习题
- Linux笔记
- 使用OpenCV和Python计算视频中的总帧数
- HDOJ 1087 (JAVA实现 最大上升子序列和dp)
- JavaSE笔记
- [译]Gas 优化 - 如何优化存储
- Codeforces Round #613 (Div. 2) C. Fadi and LCM
- N皇后问题(DFS)