Create-react -app (CRA) is the official react scaffolding tool. It integrates Babel, Webpack,wekpack-dev-server, etc.

I created a React project through CRA, and I need my project to support less and do VW adaptation. So I need to extend the Webpack configuration of CRA. I know there are two ways to do this:

    1. Expose the crA project’s webpack configuration file, webpack.config.js, and modify this file with NPM run eject. It didn’t feel good to modify its configuration directly, so we used the second method.
    1. Use react-app-Rewired, a CRA reconfiguration tool that can be used to extend the WEBpack configuration of CRA. Here’s how.

    The dependencies need to be installed first, and I’m using the react-app-rewired2.x version here, so I need to install react-app-Rewired and Cra-customize.

    cnpm i react-app-rewired cra-customize -D

    We then need to create a config-overrides. Js file in the project root directory to configure the extension by merging the crA default configuration with our extension configuration and exposing it.

    const {override} = require('customize-cra');
    module.exports = {webpack: override()}
Copy the code

    Next we need to modify the script commands in package.json

    "scripts": {
    "start": "react-app-rewired start"."build": "react-app-rewired build"."test": "react-app-rewired test"."eject": "react-scripts eject"
},
Copy the code

    Next we can extend the WebPack configuration.

    How to Configure less

    Install the dependency less less-loader.

    cnpm i less less-loader -D

    Config-overrides. Js const {override, addLessLoader} = require(‘customize-cra’);

    module.exports = {
    webpack: override(
        addLessLoader({
            strictMath: true,
            noIeCompat: true}}))Copy the code

    How to configure VW adapter

    First, install dependencies:

    Postcss-aspect-ratio -mini: core, to achieve aspect ratio. Postcss-px-to-viewport: core used to convert PX units to vw, vH, vmin, or vmax window units. When we are writing code, we can write it directly in the px of the design. Postcss-write-svg: core to automatically generate border-image or background-image images in order to solve the 1px problem. Postcss-viewport-units: core to solve vw compatibility problem (CSShack). Postcss-viewport-units automatically adds content attributes to CSS, such as (content:" viewport-units-BuggyFill; Width: 100vw"), viewport-units-BuggyFill can help us parse vw correctly. Cssnano: Core, optimize your CSS files in a variety of ways to ensure that the resulting files are minimal for production environments. Cssnano-preset -advanced: Preset: "advanced" is used in csSNano configuration postCSS-flexbugs -fixes postCSs-preset -envCopy the code
    cnpm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano  cssnano-preset-advanced --DCopy the code

    Next modify the config-overrides. Js file.

    const {override, addLessLoader, addPostcssPlugins} = require('customize-cra');

module.exports = {
    webpack: override(
        addLessLoader({
            strictMath: true,
            noIeCompat: true
        }),
        addPostcssPlugins([
            require('postcss-flexbugs-fixes'),
            require('postcss-preset-env')({
                autoprefixer: {
                    flexbox: 'no-2009',
                },
                stage: 3,
            }),
            require('postcss-aspect-ratio-mini')({}),
            require('postcss-px-to-viewport')({
                viewportWidth: 750, // (Number) The width of the viewport.
                viewportHeight: 1334, // (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: 150, // (Number) Set the minimum pixel value to replace.
                mediaQuery: false // (Boolean) Allow px to be converted in media queries.
            }),
            require('postcss-write-svg')({
                utf8: false
            }),
            require('postcss-viewport-units')({}),
            require('cssnano')({
                preset: "advanced",
                autoprefixer: false."postcss-zindex": false}})))Copy the code

    To fix viewport compatibility issues in some browsers, we also need to introduce viewPort-units-buggyfill. Js and viewPort-units-buggyfill. Hacks. The action is in the root directory of index.html.

    <script src="/ / g.alicdn.com/fdilab/lib3rd/viewport-units-buggyfill/0.6.2/??viewport-units-buggyfill.hacks.min.js, viewport - units - bugg yfill.min.js"></script>
<script> 
    window.onload = function () {
        window.viewportUnitsBuggyfill.init({
            hacks: window.viewportUnitsBuggyfillHacks
        }); 
    } 
</script>
Copy the code

    End and spend