dva + roadhog 踩坑汇总

dva中使用sass

需要先npm install sass-loader node-sass --save后，就可以使用scss语法

给className进行样式赋值无效

如果开发时样式是单独一个css文件，需要直接在页面导入全部，import './xxx.scss时，发现在scss中直接用class或者id给标签写样式是没有作用，
试验过后，发现需要在.webpackrc 配置里禁用掉默认开启的 css-modules

{
  'disableCSSModules': true
}

dva配置多环境的参数（全局环境参数）

默认在dva中会根据roadhog server 和 roadhog build 给项目新增了2个环境变量development， procution,
在项目中打印会发现console.log(process.env.NODE_ENV) //development， procution
这样我们就可以在打包时判断开发和线上环境来进行配置
例如

env: {
    development: {
      proxy: {
        '/api': {
          target: "http://xxx.aaa.com",
          changeOrigin: true,
        }
      },
    },
    porcument: {
      html: {
        template: path.resolve('public', 'template', 'index.ejs'),
      }
    }
  },

但是如果需要第其他环境变量来区分的话，可以在npm script中

11.png

roadhog server/build 新增需要的参数配置

这个时候在.webpackrc.js 中打印process.env.APP_ENV 会得到不同的变量，但是如果直接在项目中打印的话 会发现是undefined。(还不清楚具体原因)
我们就需要利用roadhog define这个配置项,

2.png

把APP_ENV这个值先赋值给他，

define: {  'APP_ENV': process.env.APP_ENV }

然后就可以在全局中直接使用 APP_ENV 这个环境变量区分使用一些逻辑了

eslint报错

但是如果在define中是使用上面方式赋值，然后直接使用APP_ENV eslint 会报 APP_ENV is not defined，
这时你可以

define: { 
 'process.env.APP_ENV': process.env.APP_ENV 
}

进行赋值在页面中直接调用 process.env._APP_ENV的方式
也可以直接在.eslintrc.js 中将APP_ENV配置成一个全局变量，之后eslint就不会认为APP_ENV是未定义的变量了。

{
  "extends": "umi",
    "globals": {
      "APP_ENV": false
    }
}

使用 postcss plugin

可发时需要用到一些postcss的插件，比如postcss-pxtorem，由于roadhog 文档没有说明，实际可以使用
extraPostCSSPlugins 进行配置

import pxtorem2 from 'postcss-pxtorem'

export default {
  extraPostCSSPlugins: [
    pxtorem2({ rootValue: 100, propWhiteList: [], })
  ],
}

配合使用postcss-pxtorem （antd主题无法修改）

如果项目使用antd-mobile(2.0以上版本) 并且同时使用了pxtorem自动转rem的插件，会导致antd-mobile的组件样式同时被转换，但是
导致样式很小，需要做适配处理

  theme: {
    '@hd': '2px'
  },
  extraBabelPlugins: [
    ["import", { libraryName: "antd-mobile", libraryDirectory: "es", style: true}], // 这里不能使用style: 'css' 形式，否则会没用
  ],

未完