React + Typescript + Sass + CssModules + VW适配

1、创建create-react-app

这里我使用的是官方提供的脚手架工具并且采用了react-scripts-ts适配器

[react-scripts-ts]是一系列适配器，它利用标准的create-react-app工程管道并把TypeScript混入进来。
如果你不习惯使用Typescript可以在创建命令行当中去掉 --scripts-version=react-scripts-ts

create-react-app my-app --scripts-version=react-scripts-ts

初始路径如下

my-app/
├─ .gitignore
├─ node_modules/
├─ public/
├─ src/
│  └─ ...
├─ package.json
├─ tsconfig.json
└─ tslint.json

导出Webpack配置文件(这里运行后是不可逆的，会造成项目目录和package.json的污染，但目前没有更优的解决办法)

yarn eject

---

2、配置Webpack

参考如何在Vue项目中使用vw实现移动端适配

配置之前先下载依赖

yarn add postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext cssnano node-sass sass-loader typings-for-css-modules-loader

打开config/webpack.config.dev.js和webpack.config.prod.js 将刚刚下载好的依赖引用到我们的项目当中，两个文件配置相同

const postcssAspectRatioMini = require('postcss-aspect-ratio-mini');
const postcssPxToViewport = require('postcss-px-to-viewport');
const postcssWriteSvg = require('postcss-write-svg');
const postcssCssnext = require('postcss-cssnext');
const cssnano = require('cssnano');

在module中添加sass vw css-modules相关配置

          {
            test: /\.scss$/,
            use: [
              { loader: require.resolve('style-loader') },
              {
                loader: require.resolve('typings-for-css-modules-loader'), // 如果项目中不使用typescript这里可以直改成css-loader
                options: {
                  modules: true, // 开启css-modules
                  namedExport: true,
                  camelCase: true,
                  minimize: true,
                  sass: true,
                  localIdentName: "[local]_[hash:base64:5]"
                }
              },
              {
                loader: require.resolve('postcss-loader'),  // 配置vw适配
                options: {
                  ident: 'postcss',
                  plugins: () => [
                    require('postcss-flexbugs-fixes'),
                    autoprefixer({
                      browsers: [
                        '>1%',
                        'last 4 versions',
                        'Firefox ESR',
                        'not ie < 9', // React doesn't support IE8 anyway
                      ],
                      flexbox: 'no-2009',
                    }),

                    // 适配移动端
                    postcssAspectRatioMini({}),
                    postcssPxToViewport({
                      viewportWidth: 375, // (Number) The width of the viewport. 
                      viewportHeight: 667, // (Number) The height of the viewport. 
                      unitPrecision: 3, // (Number) The decimal numbers to allow the REM units to grow to. 
                      viewportUnit: 'vw', // (String) Expected units. 
                      selectorBlackList: ['.ignore', '.hairlines'], // (Array) The selectors to ignore and leave as px. 
                      minPixelValue: 1, // (Number) Set the minimum pixel value to replace. 
                      mediaQuery: true // (Boolean) Allow px to be converted in media queries. 
                    }),
                    postcssWriteSvg({
                      utf8: false
                    }),
                    postcssCssnext({
                      warnForDuplicates: false
                    }),
                    cssnano({
                      preset: "advanced",
                      autoprefixer: false,
                      "postcss-zindex": false
                    })
                    // end
                  ],
                },
              },
              { loader: require.resolve('sass-loader') },
            ],

          },

配置完之后重启环境即可。