[Bug Report] 使用flexible.js做适配,postcss-px2rem转换px为rem,引入vux组件编译失败

[BolinWang]

VUX version

2.8.1

OS/Browsers version

任何

Vue version

2.5.2

Code

in ./node_modules/_vux@2.8.1@vux/src/components/picker/index.vue

Module build failed: Error: Failed to find './scroller.css'
  in [
    /Users/wlb/FT_mobile-seed
  ]
    at resolveModule.catch.catch (/Users/wlb/FT_mobile-seed/node_modules/_postcss-import@11.1.0@postcss-import/lib/resolve-id.js:35:13)

 @ ./node_modules/_vue-style-loader@3.1.2@vue-style-loader!./node_modules/_css-loader@0.28.11@css-loader?{"sourceMap":false}!./node_modules/_vue-loader@13.7.1@vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-4a3e6329","scoped":false,"hasInlineConfig":true}!./node_modules/_vux-loader@1.2.8@vux-loader/src/style-loader.js!./node_modules/_vue-loader@13.7.1@vue-loader/lib/selector.js?type=styles&index=0!./node_modules/_vux@2.8.1@vux/src/components/picker/index.vue 4:14-405 13:3-17:5 14:22-413
 @ ./node_modules/_vux@2.8.1@vux/src/components/picker/index.vue
 @ ./node_modules/_babel-loader@7.1.4@babel-loader/lib!./node_modules/_vux-loader@1.2.8@vux-loader/src/script-loader.js!./node_modules/_vux-loader@1.2.8@vux-loader/src/script-loader.js!./node_modules/_vue-loader@13.7.1@vue-loader/lib/selector.js?type=script&index=0!./node_modules/_vux@2.8.1@vux/src/components/popup-picker/index.vue
 @ ./node_modules/_vux@2.8.1@vux/src/components/popup-picker/index.vue
 @ ./src/main.js
 @ multi ./node_modules/_webpack-dev-server@2.11.2@webpack-dev-server/client?http://192.168.5.163:1314 webpack/hot/dev-server ./src/main.js

Steps to reproduce

1、postcss使用postcss-px2rem 2、引用VUX组件编译失败，各种找不到源码对应的css文件 3、不使用postcss-px2rem后，一切正常

What is Expected?

懵逼，找不到问题原因，希望使用postcss-px2rem后，vux组件引用正常

What is actually happening?

使用postcss-px2rem后，vux组件编译失败，找不到对应的css文件

[airyland]

麻烦建一个可重现的 repo，因为有其他人反馈但是也并未给出具体 repo，所以不好解决。

[BolinWang]

@airyland 其实简单的说就是在vue-loader.conf.js文件中配置的postcss-px2rem，然后使用vux组件css文件报错，你可以直接将vue-loader.conf.js文件中module.exports代码替换为以下代码：

对应module.exports代码：

module.exports = { loaders: utils.cssLoaders({ sourceMap: sourceMapEnabled, extract: isProduction }), cssSourceMap: sourceMapEnabled, cacheBusting: config.dev.cacheBusting, transformToRequire: { video: 'src', source: 'src', img: 'src', image: 'xlink:href' }, postcss: [ require('autoprefixer')({ browsers: ['iOS >= 7', 'Android >= 4.1'] }), require('postcss-px2rem')({ rootValue: 75, // 这里对应的是750的设计图尺寸 selectorBlackList: ['html'], mediaQuery: true, propBlackList: [] // 如果要保持font-size不转换，替换为 ['font-size'] }) ] }

[BolinWang]

@airyland 研究了一上午不知道怎么解决，然后小伙伴把postcss-px2rem换成postcss-plugin-px2rem解决问题了！ 如果有其他人遇到这种情况你可以让他们暂时这么处理下，我看看是不是postcss-px2rem源码跟vux有路径冲突

[CoinNi]

postcss-plugin-px2rem 是怎么配置webpack的呢?请问

[CoinNi]

@BolinWang

[BolinWang]

@huanggl8 vue-loader.conf.js

module.exports = {
  loaders: utils.cssLoaders({
    sourceMap: sourceMapEnabled,
    extract: isProduction
  }),
  cssSourceMap: sourceMapEnabled,
  cacheBusting: config.dev.cacheBusting,
  transformToRequire: {
    video: 'src',
    source: 'src',
    img: 'src',
    image: 'xlink:href'
  },
  postcss: [
    require('autoprefixer')({
      browsers: ['iOS >= 7', 'Android >= 4.1']
    }),
    require('postcss-plugin-px2rem')({
      rootValue: 36, // 这里对应的是750的设计图尺寸
      selectorBlackList: [],
      mediaQuery: true,
      propBlackList: [] // 如果要保持font-size不转换，替换为 ['font-size']
    })
  ]
}

webpack.base.conf.js

module.exports = vuxLoader.merge(webpackConfig, {
  plugins: ['vux-ui', 'progress-bar', 'duplicate-style', {
    name: 'after-less-parser',
    fn: function(source) {
            const sourcePath = this.resourcePath.replace(/\\/g, '/')
      if (sourcePath.indexOf('vux/src/components') > -1) {
        source = source.replace(/px/g, 'PX')
      }
      // // 自定义的全局样式大部分不需要转换
      // if (sourcePath.indexOf('App.vue') > -1) {
      //   source = source.replace(/px/g, 'PX').replace(/-1PX/g, '-1px')
            // }
      return source
    }
  }, {
        name: 'style-parser',
        // <style></style> 代码处理
    fn: function(source) {
      const sourcePath = this.resourcePath.replace(/\\/g, '/')
      if (sourcePath.indexOf('vux/src/components') > -1) {
        source = source.replace(/px/g, 'PX')
      }
      // 避免转换1PX.less文件路径
      if (source.indexOf('1PX.less') > -1) {
        source = source.replace(/1PX.less/g, '1px.less')
            }
      return source
    }
  },{
    name: 'less-theme',
    path: 'src/styles/theme.less' // 相对项目根目录路径
  }]
})

[zhangchenpan]

你好,我按照上边的写法在webpack.base.conf.js配置后, 把自定义样式的px转为大写的PX了, 按照正常的效果应该是把vux中的样式转为大写才对吧.