样式处理部分配置问题

appbest commented 5 years ago

这是一个非常不错的开发环境，实际使用中，遇到了样式问题，卡住了。请大神解救：尝试写demo 适应 h5 与微信，使用了 rem作为单位。运行双环境时，rem 被转为了 rpx 导致 h5 运行时，无法识别此单位，找了好久都没找到相关的配置处理办法。

F-loat commented 5 years ago

可以参考 ithome-lite 这个项目，有空会整合进来

appbest commented 5 years ago

参考了，能方便加个微信么

appbest commented 5 years ago

单位转换，还是没有找到

appbest commented 5 years ago

你那个邮箱可以用么，我发你

F-loat commented 5 years ago

rem 被转为了 rpx 就是 postcss-mpvue-wxss 这个插件处理的，h5 模式下禁用掉就好了

appbest commented 5 years ago

关于根目下 .postcssrc.js 配置已经改了，还是不行

/**样式转化配置
 * 清理 wxss 不支持的选择器。
 * 清理 wxss 不支持的注释。
 * 转换 rem 单位到 rpx。
 * 转换 Web 的标签选择器到小程序的 class 选择器。
 * style scoped（postcss插件部分）。
 * http://mpvue.com/build/postcss-mpvue-wxss/
 * https://github.com/michael-ciniawsky/postcss-load-config
 */

module.exports =
  process.env.MODE === 'mp'
    ? {
        plugins: {
          'postcss-mpvue-wxss': {
            // 小程序打包
            // css 单位处理设置
            cleanSelector: ['*'],
            //缩放比例
            //remToRpx: 400
            // replaceTagSelector: Object.assign(replaceTagSelectorMap, {
            //   '*': 'view, text' // 将覆盖前面的 * 选择器被清理规则
            // })
            remToRpx: 400,
            replaceTagSelector: Object.assign(replaceTagSelectorMap, {
              '*': 'view, text' // 将覆盖前面的 * 选择器被清理规则
            })
          }
        }
      }
    : {
        plugins: {
          'postcss-import': {},
          'postcss-url': {},
          // to edit target browsers: use "browserslist" field in package.json
          autoprefixer: {}
        }
      }

F-loat commented 5 years ago

直接导出 h5 的配置呢，你用的模板是 master 分支的吧

{
  plugins: {
    'postcss-import': {},
    'postcss-url': {},
    // to edit target browsers: use "browserslist" field in package.json
    autoprefixer: {}
  }
}

appbest commented 5 years ago

应该是加一个判断，是 h5模式，就不用转换是小程序 mp 模式，就用转换

appbest commented 5 years ago

module.exports =process.env.MODE === 'mp'? {mp配置}:{ h5 配置}

appbest commented 5 years ago

备注一下，使用 cross-env 配置

npm i -D cross-env

修改 package.js

"scripts": { "start": "npm run dev", "dev": "mpvue dev --pages src/router/routes.js", "build": "mpvue build --pages src/router/routes.js", "dev:h5": "cross-env MODE=h5 mpvue dev --mode h5 --config webpack.conf.h5.js", "build:h5": "cross-env MODE=h5 mpvue build --mode h5 --config webpack.conf.h5.js", "lint": "eslint --ext .js,.vue src" },

F-loat commented 5 years ago

之前的代码好像没发布，现在 mpvue-builder 已经会直接注入 process.env.MODE 这个变量了，参见 https://github.com/F-loat/mpvue-packager/blob/master/bin/index.js#L16

F-loat / mpvue-quickstart

样式处理部分配置问题 #15