songsiqi / px2rem-postcss Goto Github PK

现在有个问题是，在手机上，调出小键盘，页面重新渲染，用户体验特别不好，这咋改呀？

压缩后， 注释 /no/ /px/ 失效。
经测试， 单独使用 UglifyJsPlugin 也会出现该问题。

不明原因， 推测是 loader 和 plugin 加载的时序有问题

但是暂时还没有找到方法控制时序

我写成这个形式配置postcss插件就没办法传入px2rem的参数,

var px2rem = require('postcss-px2rem');

module.exports = {
      "plugins": {
        // to edit target browsers: use "browserslist" field in package.json
        "autoprefixer": {},
        "postcss-px2rem": px2rem({remUnit: 100})
   } 
}

postcss-px2rem版本：0.3.0

源文件变为 "../../<input css 1>" ， 目测是 postcss.parse(newCssText) 引起的

1px 2px 转 rem后，有些安卓机就不显示，
可否支持一下参数配置，对1px 2px不进行转换

vue项目。当开启CSS sourceMap时，没有使用postcss-px2rem时，chrome中查看Hello.vue的样式，样式的源的名称会显示为：Hello.vue? [sm]:18 这样，但是在postcss.config.js里配置postcss-px2rem后，px转换成rem是可以，但是样式的源的名称会显示为这样： <input css 10>:1

postcss.config.js配置如下：

module.exports = {
  plugins: {
    'postcss-px2rem': {
      remUnit: 14
    }
  }
}

不知道这是不是在设计之中。以及，可以优化么。

vue-cli bulid/utils.js

  /* ... */
  var cssLoader = {
    loader: 'css-loader',
    options: {
      minimize: process.env.NODE_ENV === 'production',
      sourceMap: options.sourceMap
    }
  },
  postcssLoader = {
    loader: 'postcss-loader',
    options: {
      sourceMap: false /*设为false才有效*/
    }
  }

  // generate loader string to be used with extract text plugin
  function generateLoaders (loader, loaderOptions) {
    var loaders = [cssLoader, postcssLoader]
    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }
/* ... */

.postcsssrcjs

module.exports = {
  "plugins": {
    'postcss-px2rem': {remUnit: 75},
    'postcss-cssnext': {}
  }
}

插件是生效了的

[data-dpr="2"] .header-title {
    font-size: 0.48rem;
}

border-bottom: 0.013333rem solid rgba(95, 96, 108, .2);

如果sourceMap改成false的话就正常了

[data-dpr="2"] .header-title {
    font-size: 36px;
}

border-bottom: 1px solid rgba(95, 96, 108, .2);

不知道为什么，望解答

执行报错node.getIterator is not a function

请问不想让1px边框被转为rem，怎么配置？？

react 使用stylus，配置完无法自动转化成rem，px还是px，没有转化
配置如下：
plugins: () => [
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
}),
// Adds PostCSS Normalize as the reset css with default options,
// so that it honors browserslist config in package.json
// which in turn let's users customize the target behavior as per their needs.
postcssNormalize(),
require('postcss-px2rem-exclude')({
remUnit: 37.5 ,
exclude:/node_modules/i
}),
],

如题？

vue-cli webpack 怎么配置px2rem-postcss

用的postcss-loader,在postcss.config.js里面加入
module.exports = {
plugins: [
require('autoprefixer'),
require('postcss-px2rem')
]
}。
webpack配置
{
test: /.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [
{loader: "css-loader"},
{loader:"postcss-loader"}
]
})
}
怎么去配置remUnit这个参数呢

const pxtorem = require('postcss-px2rem')
const postcssPresetEnv = require('postcss-preset-env')
module.exports = ({ file }) => {
  let remUnit = null
  if (file && file.dirname && file.dirname.indexOf('vant') > -1) {
    remUnit = 37.5
  } else {
    remUnit = 75
  }
  return {
    plugins: [
      pxtorem({
        remUnit: remUnit,
        propList: ['*'],
        selectorBlackList: ['']
      }),
      postcssPresetEnv({
        stage: 3,
        features: {
          'nesting-rules': true,
          'color-mod-function': { unresolved: 'warn' }
        }
      })
    ]
  }
}

selectorBlackList 不管我设置如何匹配都是不生效的，而且查询了源代码根本没有selectorBlackList 这个配置选项

我在目前的一个项目中用到了lib-flexible和px2rem，在打包中我发现如果使用了webpack.optimize.UglifyJsPlugin插件，我的理解是因为自动去除了/*px*/的注释，所以插件无法编译出

[data-dpr="2"] .div {
  font-size:32px;
}
[data-dpr="3"] .div {
  font-size:48px;
}

只能全部转为rem。
在贵司的开发中是否遇到过这样的问题？还是我的使用方法不对。

border:1px solid #eee;
这种 格式 转化为 rem 了
可以有配置 不转换么

如题，这个怎么解决啊

`const {
override,
addWebpackAlias,
addPostcssPlugins,
} = require('customize-cra')
const path = require('path')

const stylus = () => (config) => {
const stylusLoader = {
test: /.styl$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
modules: {
mode: 'local',
// 样式名规则配置
localIdentName: '[local]--[hash:base64:5]',
},
},
},
// .styl 20px -> 0.2rem
{
loader: 'px2rem-loader',
options: {
remUnit: 100
}
},
{
loader: 'stylus-loader',
},
],
}
const oneOf = config.module.rules.find((rule) => rule.oneOf).oneOf
oneOf.unshift(stylusLoader)
return config
}

module.exports = {
webpack: override(
addWebpackAlias({
['src']: path.resolve(__dirname, 'src'),
}),
stylus(),
// 方式一：css文件20px -> 0.2rem
addPostcssPlugins([
require("postcss-px2rem")({ remUnit: 100 })
]),
// 方式二：css文件20px -> 0.2rem
// addPostcssPlugins([require('postcss-pxtorem')({
// rootValue: 100,
// minPixelValue: 2,
// propList: ['*'],
// }),]),
)
}`

Originally posted by @shuyanzi in #26 (comment)

vuejs/vue-loader#227

following:

.c-checkbox {
  height: 48px; /*px*/
  &.checked {
    transform: translate3d(32px, 0, 0); /*px*/
  }
}

will be converted to:

.c-checkbox {
  height: 0.64rem ;
}

.c-checkbox.checked {
  -webkit-transform: translate3d(0.426667rem, 0, 0);
  transform: translate3d(0.426667rem, 0, 0) ;
}

and that is NOT expected

• 增加注释/* disabled */
• 忽略 /* disabled */ 以下的css 转换成rem， 避免一直用 /* px */

准备只用nuxt做移动端项目，结果配置px2rem 一直没有效果，请问正确配置方式是什么呢

我希望border:1px solid;这样的1px不转换，以为1px转换成rem后在有些手机上显示不出来。
sorry，我自己搞错了。

px2rem 失效

{
test: /.css$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader', 'postcss-loader')
//loader: "style-loader!css-loader!postcss-loader"
},

{
test: /.styl$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
},
},
{
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebook/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
px2rem({ remUnit: 37.5 })
],
},
},
{
loader: require.resolve('stylus-loader')
}
],
}

• 使用postcss-cssnext+px2rem-postcss

// 解析失败
body, html {
  width: 100%;
  height: 100%;
  & a {
    text-decoration: none;
    color: #2d2d34;
    font-size: 24px;/*px*/      //=>无法解析，直接转为rem。最后一个位置就失败。
  }
}
// 解析成功-1
body, html {
  width: 100%;
  height: 100%;
  & a {
    text-decoration: none;
    font-size: 24px;/*px*/      //=>解析成功，转为px，非最后一个就成功
    color: #2d2d34;
  }
}
// 解析成功-2
a {
    text-decoration: none;
    color: #2d2d34;
    font-size: 24px;/*px*/      //=>解析成功。无嵌套。最后一个。
}

--- CONFIG

new webpack.LoaderOptionsPlugin({
    options: {
      context: files.appPath,
      postcss: [
        require('postcss-cssnext')(({
          features: {
            customProperties: false,
          },
        })),
        require("postcss-px2rem")({
          remUnit     : 75,
          remPrecision: 8,
          baseDpr     : 2 // 默认2倍视角
        })
      ],
    },
  }),