songsiqi/px2rem

According to one stylesheet, generate rem version and @1x, @2x and @3x stylesheet.

px2rem's Issues

怎样设置使单个vue页面生效 其他的vue页面不生效

设置module.exports = {
plugins: {
autoprefixer: {},
'postcss-px2rem': {
remUnit: 75
}
}
}之后整个vue都生效 我只想让其中一个vue页面生效该怎么设置

引入一个ui框架，有办法不对它进行转换吗？

在vue项目中引入了vux，发现会对组件样式转换，变形
有什么方法可以解决吗？

我发现对px改成PX，也不会进行rem转换，是巧合还是故意设计

不太确定如果单位写成PX是否会存在兼容性问题，不过在高级浏览器和我测试的几部手机观察来看未发生异常。
假设通过将单位故意大写为PX而避免转换的话，是不是相对尾部写/*no*/来进行过滤更为方便？

发现这个特征的是在学习postcss的时候用到postcss-pxtorem插件，碰巧测试出来的。
当然个人倒的确倾向于写PX，如果不存在兼容性问题。

示例：
转换前：

.pic-txts {
  text-align: left;
  border:1px solid #ddd; /*px*/
  border-radius: 5PX;
  width:690px;
  display: block;
}

转换后：

.pic-txts {
  text-align: left;
  border-radius: 5PX;
  width: 9.2rem;
  display: block;
}

[data-dpr="1"] .pic-txts {
  border: 0.5px solid #ddd;
}

[data-dpr="2"] .pic-txts {
  border: 1px solid #ddd;
}

[data-dpr="3"] .pic-txts {
  border: 1.5px solid #ddd;
}

exclude node_modules报错无效

vue-cli 如下配置 加上.exclude.add(resolve('node_modules/vue-contextmenujs'))会报错
请问 是有什么其他配置么

nuxt 2.0 引入问题

  build: {
    extend(config, ctx) {
      config.module.rules.push({
        test: /\.css$/,
        loader: 'px2rem-loader',
        options: {
          remUnit: 16
        }
      })
 }

nuxt 2.0 引入后 rem 并没有动态适配不同的窗口大小，而变成了固定值

才发现已经三年没维护过了

css 里如果有注释会报错

// 注释 

请教下，如果有单行注释解析不了，怎么处理？

所以这个插件是不支持gulp-sourcemaps的是吗

……

可能加个排除目录或者文件的配置或者自动检测跳过样式代码块吗?

比如我写的scss文件中有import其他的css或者scss文件

@import '../vendor/swiper';
@import '../vendor/weui';

有没有办法跳过他们例如加个注释检测

/*do not transform start*/
@import '../vendor/swiper';
@import '../vendor/weui';
/*do not transform end*/

之类的.

针对不同dp的时候，我@1x，@2x，@3x的图片会自动帮我生成样式吗？

threeVersion 这个是否是控制三个版本样式的生成？我设置为true，但是无效。如下是px2rem的配置

// less编译后的css将注入到浏览器里实现更新
gulp.task('transform', function () {
var options = [px2rem({
baseDpr: 2, // 基础设备像素比例(默认值：2)
threeVersion: true, //是否生成@1x @2x和@3x版本(默认值：false)
remVersion: true, // 是否生成rem版本(默认值：true)
remUnit: 75, // rem基准值 (默认值: 75)
remPrecision: 6 // rem精确度 (默认值: 6)
})];
return gulp.src('./public/less/*.less')
.pipe(less())
.pipe(postcss(options))
.pipe(rename("style.css"))
.pipe(gulp.dest('./public/dist'))
// .pipe(reload({
// stream: true
// }));
});

关于npm的Readme中的示例书写失误的问题

您好，在npm中您的示例代码为

module.exports = { // ... module: { rules: [{ test: /\.css$/, use: [{ loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'px2rem-loader', // options here options: { remUni: 75, remPrecision: 8 } }] }] } }

其中remUni应该改为您github中的示例remUnit。今天刚好看到其他社区也有人反应设置unit不生效的问题，在这里顺便提一下。

webpack插件.less文件怎么搞

            {
                test: /\.less$/,
                loader: 'style-loader!css-loader!autoprefixer-loader?{browsers:["android 4", "ios 6", "last 1 Chrome versions", "last 2 Safari versions"]}!less-loader'
            }

这是当前的的配置，想用px2rem-loader，但直接加到这个loader后面会报错，想问下处理less文件的话，要怎么配置呢？

配置建议

建议增加参数配置：例如：px2rem?remUnit=37.5&exclude=['font-size']，这样团队里具体使用的人就不要在每个单独的属性的地方增加/no/

设计稿414的怎么配置？

你好，设计稿414的怎么配置？

编译后的css能不能不带debug

gulp里面编译出的css能不能不是.debug.css，直接输出.css，remVersion设为false之后直接就不输出css了，是否可以增加个参数需要debug的时候才添加debug

兼容问题

background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2216px%22%20height%3D%2226px%22%20viewBox%3D%220%200%2016%2026%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%2...

背景使用svg转码后 "21px" 会转成 %2221px， px2rem后结果不对

px2rem配置生效了，但是转换后的值只有原始值的一半

例如px2rem中的remUni设置为32，在vue文件中的样式设置为320px，最后转换后的rem值是4rem，应该是8rem才对啊（iPhone5下）

能否支持某个页面不转换rem

现在有多个页面，希望某个页面不转换成 rem，这个要如何操作呢？

用-x生成三个版本的css的时候有问题

第一个是生成了三份css，其实我只想要一份合并的，有大部分的重复代码并不需要分开三份。
第二个是本来是1px的border变成了2px和3px，这不合理……

期待你的回复……

webpack压缩时候会把css的注释先去除，然后在loader，导致带注释的编译无效

未优化压缩前，是可以的。
上线时候执行webpack.optimize 发现编译后的css文件，border:1px solid red 这样的都是编译成了rem，写的时候是用/px/的，请问要怎么整

px2rem-loader 不能运用到 vue 文件中，使用时报错

按照官方的语法推荐，去用，失效。

[{ test: /\.vue$/, loader: vue.withLoaders({css: 'css!px2rem?remUnit=75&remPrecision=8'})}]

ReferenceError: vue is not defined

配置vue不生效 也不报错

{
  test: /\.vue$/,
  loader: 'vue-loader',
  options: {
  loaders:{
    css: [
      'vue-style-loader',
      'css-loader',
        {
          loader:'px2rem-loader',
          options: {
            remUnit: 75,
            remPrecision: 8
          }
       }
    ],
    scss: [
      'vue-style-loader',
      'css-loader',
        {
          loader:'px2rem-loader',
          options: {
            remUnit: 75,
            remPrecision: 8
          }
        },
      'sass-loader'
    ],
  }
 }
}

如上代码 不生效 也不报错，看了好多次文档

能否在开发时显示px像素值

(感谢大佬开源, 很好用)
接下来是问题:
代码 font-size: 15px;
chrome styles 下显示: font-size: 0.5rem;
期望
chrome styles 下显示: font-size: 0.5rem /* 15px */;

SCSS备注/*no*/ /*px*/不生效

可能原因是？

使用sass样式嵌套会报错

px转换成rem后，小数位太多，如何控制在两位小数中？

px转换成rem后，小数位太多，如何控制在两位小数中？

不兼容ipad么？

为什么在ipad上不能铺满呢？转换后最大只有10rem，宽度没有铺满屏幕

某些情况下需要用 px 作为单位

这种情况下该怎么办

使用px2rem配合scss时，/*px*/、/*no*/失效

使用版本号"px2rem-loader": "^0.1.9",
Vue 在<style scoped lang="scss">

 font-size: 28px; /*px*/
 border: 1px solid #ddd; /*no*/

不生效，依旧转为rem

在<style>默认的css中会生效

支持对vue中style样式转换吗

例如通过一个vue组件属性传递过来css值 这时候在style中 不是单独css文件 能转换吗

Support Animation keyframes.

什么时候加上这个啊