Open custom configuration options

yarn eject
//Are you sure you want to eject? This action is permanent. (y/N) 
y
Copy the code

Modify the configuration

Configure to use SCSS

  • Modify theconfigThe folderwebpack.config.dev.jsandwebpack.config.prod.js
# The first is: (about 167 lines)
test: / \. $/ into CSStest: /\.s? css$/# The second place is: (about 217 lines)
{loader: require.resolve('sass-loader')}
Copy the code
  • The installationsassThe plug-in
yarn add node-sass sass-loader -D
Copy the code

Install the postCss plug-in

yarn add postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano -D
Copy the code

configurationpostcss

  • inwebpack.config.dev.jsandwebpack.config.prod.jsModify the file as follows
// 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 postcssViewportUnits = require('postcss-viewport-units');
const cssnano = require('cssnano');
// 使用
{
    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',}), postcssAspectRatioMini({}), postcssWriteSvg({// To handle mobile 1px solution utf8: False,}), postcssCssnext({}), postcssPxToViewport({viewportWidth: UnitPrecision: 3, unitPrecision: 3, unitPrecision: 3, unitPrecision: 3, unitPrecision: 3px'conversion to viewportUnit is worth a decimal number (often not divisible) viewportUnit:'vw', // Specify the window unit to convert to. Recommend using vw selectorBlackList: ['.ignore', '.hairlinessIt is recommended to define one or two generic class names minPixelValue: 1, // less than or equal to '1px' will not convert to Windows units, you can also set the value to what you want. mediaQuery: False, // Allow converting 'px'}), postcssViewportUnits({}), // Add content attributes to CSS attributes with viewport-units-buggyFill to resolve individual phones that do not support VW cssnano({// Zip and clean CSS code autoprefixer: false, 'postcss-zindex': false, }), ], }, },Copy the code

VW compatibility scheme

    • The main use ofviewport-units-buggyfill.jS andviewport-units-buggyfill.hacks.js, just need to be inpublic/index.htmlTo introduce them
    • in<head></head>To introduce Ali CDN:<script SRC = "/ / g.alicdn.com/fdilab/lib3rd/viewport-units-buggyfill/0.6.2/??viewport-units-buggyfill.hacks.min.js, viewport - units - buggyfill.min.js"></script>
    • Called in an HTML fileviewport-units-buggyfill
    <! -- Use viewport-units-buggyFill to solve the problem that some phones do not support VW --> <script> window.onload =function () {
    window.viewportUnitsBuggyfill.init({
      hacks: window.viewportUnitsBuggyfillHacks
    });
  }
</script>
Copy the code
    • The postCSS-viewport-Units plug-in configured earlier. This plugin will let you ignore the content of the content, the plugin will take care of it for you automatically.