react实现适配vw vh rem

首先下载一个sass-resources-loader插件：

npm install sass-resources-loader --save-dev

创建一个文件:

@function vw($px) {
  @return ($px / 1920) * 100vw;
}

@function vh($px) {
  @return ($px / 1075) * 100vh;
}

@function rem($px) {
  @return ($px / 100) * 1rem;
}

这是个人适配内容，然后我们需要把这个引入所有的scss文件，
找到node_modules\react-scripts\config\webpack.config.js文件中的

{
              test: sassRegex,
              exclude: sassModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                },
                'sass-loader'
              )
}

在其后面添加

concat([
                {
                    loader: "sass-resources-loader",
                    options: {
                        resources: path.join(__dirname, "../../../src/assets/css/mixin.scss")
                    }
                }
              ])

在这里插入图片描述
这样就能实现适配了。