react中使用scss全局变量做留海屏幕适配

最近我的react工程需要做留海屏幕适配，用了公司的框架mtl（支持友空间），我们都知道现在大多数做留海适配都是在顶部设置25px的高度，那为什么做适配会用到scss全局变量呢？
答案就是方便！配置了全局变量后我们可以在想要的任何地方使用，设置使用css的calc动态计算一些宽度或者高度等等，话不多说，看代码

• 1.安装 sass-resources-loader

 cnpm i sass-resources-loader --save-dev

• 2.修改 config 里面的 webpack.config.js（前提使用npm run eject已经将配置文件暴露出来）

{
   test: sassRegex,
      exclude: sassModuleRegex,
      use: getStyleLoaders(
        {
          importLoaders: 2,
          sourceMap: isEnvProduction && shouldUseSourceMap,
        },
        'sass-loader',
      ).concat({  // 从这里.concat开始就是你需要添加的代码
          loader: 'sass-resources-loader',
          options: {
              resources: [
                  // 这里按照你的文件路径填写
                  path.resolve(__dirname, './../src/styles/match.scss')
              ]
          }
      }),

• 3.配置好记得重启项目，接下来我们需要编写match.scss代码

 :root {
  --height-primary: 0px;  //--height-primary  ：变量名，css3有规则
}
$header: var(--height-primary); //用var来盛放变量名
$baseBlue: #108ee9;

• 4.然后利用全局变量来控制元素顶部的padding，在src->index.js这么写：

// eslint-disable-next-line  
// 这个注释不用在意,我的mtl.js文件是在script引入的，在index.js直接使用的话需要加上这个注释让eslint忽略undefined

let platform = mtl.platform
let fringeHeight = 0
if (platform === 'ios' || platform === 'android') {
  fringeHeight = 25 // 如果是ios或者安卓平台就加上25px的padding，目前来说这个比较通用
} else {
  fringeHeight = 0
}
document.getElementsByTagName('body')[0].style.setProperty('--height-primary',`${fringeHeight}px`)

5.我们在工程中任意位置都能使用$header这个css变量

.page-header {
  padding-top: $header;
  background: $baseBlue;
}
.page-main {
  top: calc(90px + #{$header});
}

补充一下：setProperty作用是设置一个新的 CSS 属性，我设置在了body上，那么页面上body内的所有元素都可以使用这个新属性，我又把这个新属性的值赋给了 $header，最终我在项目中任何位置都能获取到这个 $header