在移动端项目中使用 postcss-pxtorem 做适配,同时也使用到了第三方 UI 库。

在多数时候如果我们不希望对某些文件下的组件做 px 转 rem 处理,可以在配置文件 postcssrc.js 中配置postcss-pxtorem 的 exclude 属性来过滤掉。

exclude 配置的值可以是字符串也可以是正则匹配,它匹配的是文件名或目录。用法如下:

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    // to edit target browsers: use "browserslist" field in package.json
    "autoprefixer": {
      browsers: ['Android >= 4.0', 'iOS >= 7', "last 2 versions"]
    "postcss-pxtorem": {
      rootValue: 23.4375, // 640
      propList: ['*'],
      selectorBlackList: [],
      minPixelValue: 1,
      exclude: /src/ig // src 目录下样式全部不转义

这时就出现了一个问题:第三方UI库使用的是px,而postcss将页面中的px 全部转化成了rem,导致部分组件的样式乱了,但有些组件是正常的,也达到了我们想要的放大或缩小的结果,这时候怎么处理部分组件样式呢?

查询postcss配置文档后发现 其提供了selectorBlackList 属性来忽略掉某些选择器。

举个栗子,我需要保证某个第三方组件xxx-datetime样式不转换,只需要找到它内部涉及样式的类名,简洁的办法是直接用类名前缀去匹配,比如“.xxx-datetime”,如果内部涉及不加前缀的类名,就只能枚举了。

突然感受到了CSS命名规范的重要性有木有!!!具体配置如下:

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    // to edit target browsers: use "browserslist" field in package.json
    "autoprefixer": {
      browsers: ['Android >= 4.0', 'iOS >= 7', "last 2 versions"]
    "postcss-pxtorem": {
      rootValue: 23.4375, // 640
      propList: ['*'],
      selectorBlackList: ['.xxx-datetime', '.scroller-component', '.scroller-indicator', 'scroller-item'],
      minPixelValue: 1,
      exclude: /src/ig // src 目录下样式全部不转义

postcss-pxtorem

在移动端项目中使用 postcss-pxtorem 做适配,同时也使用到了第三方 UI 库。在多数时候如果我们不希望对某些文件下的组件做 px 转 rem 处理,可以在配置文件 postcssrc.js 中配置postcss-pxtorem 的 exclude 属性来过滤掉。exclude 配置的值可以是字符串也可以是正则匹配,它匹配的是文件名或目录。用法如下:module.exports = { "plugins": { "postcss-import": {}, "postcs
A message about ignoring properties Currently, the easiest way to have a single property ignored is to use a capital in the pixel unit declaration. // `px` is converted to `rem` .convert { font-size: 16px; // converted to 1rem // `Px` or `PX` is
$ npm install postcss postcss-pxtorem --save-dev 像素是最容易使用的单位(观点)。 它们的唯一问题是它们不允许浏览器将默认字体大小更改为16。此脚本将从您选择的允许浏览器设置字体大小的属性中将每个px转换为rem使用默认设置,仅定位与字体相关的属性。 / / input margin : 0 0 20px; font - size : 32px; line-height : 1.2; letter - spacing : 1px; / / output margin : 0 0 20px; font - size : 2rem; line-height : 1.2
通过使用create-react-app创建的react项目,添加了less预处理器后,可以正常编译,没有问题,但是项目时移动端项目,我们需要做移动端的适配,将px单位转化为rem,具体的方式,根据百度来的方式,配置上了,结果报了异常了:如下: ./src/pages/login/login.less (./node_modules/css-loader/dist/cjs.js??ref--6...
Uni-app postcss-pxtorpx 使用(可以exclude某个文件夹) 1、postcss-pxtorem 介绍: 一款可以把px单位转成rem的插件,具体使用方法可以点击上方链接。 // postcss.config.js module.exports = { plugins: [ require('postcss-pxtorem')({ rootValue: 16, unitPrecision: 5, propList: ['font', 'fon
刚开始我按照网上的一些方式利用postcss-pxtorem方式去适配的时候怎么样都不成功,后来经过自己不断尝试之后终于成功了。稍微坐下总结: 1.个人建议在进行postcss-pxtorem适配的时候利用webpack进行项目配置,而不要用webpack-simple,因为webpack里面很多插件加载器之类的都是给你预配好的,这样在项目构建中就不会遗漏什么。 2.cnpm install postcss-pxtorem -D安装postcss-pxtorem,此插件如果你用的是webpack的话只要进行安装即可,不需要另外进行配置,此插件是对px进行转换。 3.新建一个rem.js
最近用Vue做项目需要加个轮播效果,结果分页器死活出不来,但轮播效果和前进后退箭头以及滚动栏都是正常显示的。 基础代码如下: <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div&g
Alert提示框的vue组件编写 最近一直学习vue,跟着视频敲代码,敲了两三个组件后,终于对编写组件有一个大致的思路了,以下通过编写一个alert提示框组件大致梳理一下我编写组件的思路。 主要分为三个部分:组件引入(注册路由器)、定义组件内容样式及实现组件间通信。 (注册路由器使用路由组件也可放到最后一步,个人习惯先引入然后定义组件及样式便于观察组件显示效果) 下面是本组件引入后显示效果,通过登匹配验证为false触发alert提示框显示,点击确认关闭提示框:: 一种是写入路由,要先在在rou
作为一名进击中的前端小菜鸡,当然要会用Vue呀,还得熟练应用,计算属性computed大家也一定不陌生,但是如果遇到要传参的情况要怎么处理呢? 我们知道,计算属性computed和方法method的用法及作用极为相似,区别在于计算属性基于响应式依赖进行缓存,而函数在每次重新渲染都会重新求值。 方法的传参我们也应用得炉火纯青,毕竟函数传参嘛,怎么好意思说不会呢?因此我们第一反应都是像方法一样在计算属性中传参。次出我们要注意区分,计算属性是个属性,不能像函数方法一样使用,直接在属性内传参,但我们可以通过返回一个
问题描述: 前端后台项目都在本地运行,考虑到端口不同,在前端配置了代理如下,能够实现跨域请求,正常获取数据。但当我把后台项目都迁移到服务器运行时,前台却总是获取不到数据。 最近在VUE项目中遇到Ajax异步请求的跨域问题,之前也有系统地学习过跨域问题,网上关于跨域的解决方案整理有很多,我就不再赘述,只在本次实战中提供个人经验。 我选择了传说中最简单的跨域解决方案—nginx反向代,那么根据前后端项目都运行在本地(前端开发环境)、后端运行在服务器、前端项目分别运行在本地(前端开发环境)或者服务端进行以下三种情
Vue页面中使postcss-pxtorem插件指定文件,你可以按照以下步骤进行操作: 1. 首先,确保你的项目中已经安装了postcss-pxtorem插件及其相关依赖。你可以在项目的package.json文件中查看是否已经添加了以下依赖项: ```json "postcss": "^8.2.4", "postcss-pxtorem": "^6.0.0", "postcss-import": "^14.0.0", "postcss-loader": "^4.1.0", "postcss-url": "^10.1.1" 如果没有添加,你可以通过运行以下命令来安装它们: ```shell npm install postcss postcss-pxtorem postcss-import postcss-loader postcss-url --save-dev 2. 在项目的根目录下找到postcss.config.js文件(如果没有则创建一个),并在该文件中添加以下配置: ```javascript module.exports = { plugins: { 'postcss-pxtorem': { rootValue: 16, // 设计稿宽度除以10,例如设计稿宽度为375px,则rootValue为37.5 propList: ['*'], // 需要转换CSS属性,这里设置为全部 3. 在Vue组件的样式文件中,你可以使用px作为单位,postcss-pxtorem插件会自动将其转换为rem单位。例如: ```css .container { width: 375px; /* 在设计稿中使px作为单位 */ height: 200px; font-size: 16px; 经过postcss-pxtorem插件的处理后,上述样式将被转换为: ```css .container { width: 37.5rem; /* 在实际页面中使用rem作为单位 */ height: 20rem; font-size: 1rem; 这样,你就成功地在Vue页面中使postcss-pxtorem插件指定文件了。 you can run: npm install --save core-js/modules/es.regexp.exec core-js/modules/es.string.replace(已解决 12802 王嘎嘎嘎嘎帅: pt-key(8) 的 DEPRECATION 一节以了解详情。 W: 鉴于仓库 'https://mirrors.aliyun.com/kubernetes/apt kubernetes-xenial InRelease' 不含有 'stable' 组件,跳过配置文件 'stable/binary-amd64/Packages' 的获取。(sources.list 中的组件名称是否拼写错误?) W: 鉴于仓库 'https://mirrors.aliyun.com/kubernetes/apt kubernetes-xenial InRelease' 不含有 'stable' 组件,跳过配置文件 'stable/i18n/Translation-en' 的获取。(sources.list 中的组件名称是否拼写错误?) W: 鉴于仓库 'https://mirrors.aliyun.com/kubernetes/apt kubernetes-xenial InRelease' 不含有 'stable' 组件,跳过配置文件 'stable/i18n/Translation-zh' 的获取。(sources.list 中的组件名称是否拼写错误?) W: 鉴于仓库 'https://mirrors.aliyun.com/kubernetes/apt kubernetes-xenial InRelease' 不含有 'stable' 组件,跳过配置文件 'stable/i18n/Translation-zh_CN' 的获取。(sources.list 中的组件名称是否拼写错误?) W: 鉴于仓库 'https://mirrors.aliyun.com/kubernetes/apt kubernetes-xenial InRelease' 不含有 'stable' 组件,跳过配置文件 'stable/dep11/Components-amd64.yml' 的获取。(sources.list 中的组件名称是否拼写错误?) W: 鉴于仓库 'https://mirrors.aliyun.com/kubernetes/apt kubernetes-xenial InRelease' 不含有 'stable' 组件,跳过配置文件 'stable/dep11/icons-48x48.tar' 的获取。(sources.list 中的组件名称是否拼写错误?) W: 鉴于仓库 'https://mirrors.aliyun.com/kubernetes/apt kubernetes-xenial InRelease' 不含有 'stable' 组件,跳过配置文件 'stable/dep11/icons-64x64.tar' 的获取。(sources.list 中的组件名称是否拼写错误?) W: 鉴于仓库 'https://mirrors.aliyun.com/kubernetes/apt kubernetes-xenial InRelease' 不含有 'stable' 组件,跳过配置文件 'stable/dep11/icons-64x64@2.tar' 的获取。(sources.list 中的组件名称是否拼写错误?) W: 鉴于仓库 'https://mirrors.aliyun.com/kubernetes/apt kubernetes-xenial InRelease' 不含有 'stable' 组件,跳过配置文件 'stable/cnf/Commands-amd64' 的获取。(sources.list 中的组件名称是否拼写错误?) postcss-pxtorem中使某些样式不进行rem转换 黄er6: 请问入股是需要过滤多个组件,那应该怎么配置exclude呢?