当前位置: 首页 > 工具软件 > C++React > 使用案例 >

create-react-app 安装postcss-pxtorem的方法,react使用sass文件c

满伟彦
2023-12-01

react-app-rewired:一个CRA再配置的工具,源自React社区,可以在不eject的情况下自定义配置CRA脚手架创建的app。原理很简单,在项目根目录下新建一个配置文件(config-overrides.js),把webpack的配置作为一个config对象传入react-app-rewired,再用config-overrides中的配置对其做修改,然后用修改后的config对象对项目打包。

开始

create-react-app apppage
cd apppage 
yarn start

项目构建完毕,然后安装其他:

yarn add react-app-rewired --save-dev

yarn add customize-cra --save-dev
 /* 修改package.json */

  "scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test --env=jsdom",
+   "test": "react-app-rewired test --env=jsdom",
-   "eject": "react-scripts eject"
}

 安装 babel-plugin-import

yarn add babel-plugin-import --save

 安装 postcss-pxtorem

npm install postcss-pxtorem --save

在根目录创建config-overrides.js,添加代码:


/**
 * [description]
 * 使用过create-react-app(以下简称cra)的朋友都知道,这是react官方的一款脚手架工具,
 * 使用过内部集成了使用react-app-rewired,使用此插件可以暴露出webpack
 * 但是!react-app-rewired2.x以后,不再支持injectBabelPlugin的方式,需要安装customize-cra。
 * npm install customize-cra --save-dev 或者  yarn add customize-cra --dev
 * 所以新建config-overrides.js可以读取到该文件
 */
const { override, fixBabelImports,addPostcssPlugins } = require('customize-cra');

/**
 * [关闭打包后的sourcemap description]
 * [打包后我们会发现静态文件夹中会有很多的css和js的map文件,关闭sourcemap]
 */
// process.env.GENERATE_SOURCEMAP = "false";

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd-mobile',
    style: 'css',
  }),
  addPostcssPlugins([require('postcss-pxtorem')({
                               rootValue: 16,
                               propList: ['*']
                               // propList: ['*', '!border*', '!font-size*', '!letter-spacing'],
                               // propWhiteList: []
                            }),])

    /**
     * [安装less]
     * npm i less
     * npm i -D less-loader
     */
    // addLessLoader({
    //   javascriptEnabled: true,
    //   modifyVars: { '@primary-color': '#1DA57A' },
    // }),

    /**
     * [remUnit description]
     * npm install lib-flexible --save
     * flexible会为页面根据屏幕自动添加<meta name='viewport' >标签,
     * 动态控制initial-scale,maximum-scale,minimum-scale等属性的值。
     * 安装完成之后再入口index.js页面 import lib-flexible
     * 注意事项(important): 由于flexible会动态给页面header中添加<meta name='viewport' >标签,
     * 所以务必请把目录 public/index.html 中的这个标签删除!!!
     */

     /**
      * [postcss-px2rem]
      * npm install postcss-px2rem --save
      * postcss-px2rem会将px转换为rem,rem单位用于适配不同宽度的屏幕,
      * 根据<html>标签的font-size值来计算出结果,1rem=html标签的font-size值。
      */

    // addPostcssPlugins([
    //   require("postcss-px2rem")({ remUnit: 37.5 })
    // ])

    /**
     * [description]
     * 温馨提示: remUnit这个配置项的数值是多少呢??? 通常我们是根据设计图来定这个值,原因很简单,便于开发。
     * 假如设计图给的宽度是750,我们通常就会把remUnit设置为75,这样我们写样式时,可以直接按照设计图标注的宽高来1:1还原开发。
     * 那为什么你在这里写成了37.5呢???那我们后面专门来讲!
     * 之所以设为37.5,是为了引用像mint-ui这样的第三方UI框架,因为第三方框架没有兼容px2rem ,
     * 将remUnit的值设置为设计图宽度(这里为750px)75的一半,即可以1:1还原mint-ui的组件,否则会样式会有变化,例如按钮会变小。
     * 既然设置成了37.5 那么我们必须在写样式时,也将值改为设计图的一半。
     */
 );

新建rem.js文件

const baseSize = 32
// 设置 rem 函数
function setRem () {
  // 当前页面宽度相对于 750 宽的缩放比例,可根据自己需要修改。
  const scale = document.documentElement.clientWidth / 750
  // 设置页面根节点字体大小
  document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
  setRem()
}

在src目录下的index.js引入rem.js

完成!~~

使用sass
 

yarn add node-sass

添加后缀为sass的文件

.App 
  text-align: center;
  height: 300px;

也可以用scss 
 

.App {
  text-align: center;
  height: 300px;
}

OK ~~~  没有了!!
 

 类似资料: