基于create-react-app 脚手架安装项目

首先因为需要更改 webpack 配置

所以需要 npm run eject

把文件全部释放出来

然后使用 postcss-pxtorem 或者vm vw的插件 看自己喜好吧

安装以下依赖项:

  "devDependencies": {
    "css-loader": "^1.0.0",
    "postcss": "^7.0.2",
    "postcss-import": "^12.0.0",
    "postcss-loader": "^2.0.8",
    "postcss-pxtorem": "^4.0.1",
    "style-loader": "^0.23.0"
  },

安装完成后 找到config目录

找到webpack.config.dev.js和webpack.config.prod.js

找到以下代码

{
                loader: require.resolve('postcss-loader'),
                options: {
                  // Necessary for external CSS imports to work
                  // https://github.com/facebookincubator/create-react-app/issues/2677
                  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',
                    }),
                    require('postcss-pxtorem')({
                        rootValue: 32,
                        unitPrecision: 5,
                        propList: ['*'],
                        selectorBlackList: [],
                        replace: true,
                        mediaQuery: false,
                        minPixelValue: 12
                    })
                  ],
                },

要注意的是 这段代码就是我们要加上的

require(‘postcss-pxtorem’)

({
rootValue: 32,

unitPrecision: 5,

propList: [‘*’],

selectorBlackList: [],

replace: true,

mediaQuery: false,

minPixelValue: 12

如果是750的设计稿 那么rootValue就是32 图上多少px就写多少px

分类: React

发表评论

电子邮件地址不会被公开。