最近我的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
