1> NPM I @angular-builders/custom-webpack –save-dev (Angular project itself does not allow configuration, step 1 2 Add custom configuration for it)

2 > modify presents. Json

"architect": {
  ...
  "build": {
    "builder": "@angular-builders/custom-webpack:browser",
    "options": {
      "customWebpackConfig": {
         "path": "./webpack.config.js"
      },
      ...
    }
  },
  "serve": {
    "builder": "@angular-builders/custom-webpack:dev-server",
    "options": {
      "browserTarget": "angular02:build"
    }
  }
Copy the code

3>npm i –save-dev to-string-loader css-loader postcss-import postcss-px-to-viewport postcss-scss postcss-url precss (All dependencies needed for screen adaptation)

npm i --save-dev to-string-loader css-loader postcss-import postcss-px-to-viewport postcss-scss postcss-url precss
Copy the code

4> Create a new webpack.config.js configuration file under the root

Console. log('webpack.config.js' configuration file executes... ') // postcss plugin const postcssLoader = {loader: 'postCSs-loader ', options: {ident: 'postcss', syntax: 'postcss-scss', plugins: () => [ require('postcss-import')({ path: ['src'] }), require('precss')(), require('postcss-px-to-viewport')({ viewportWidth: 375, // The width of the window corresponds to the width of our design, generally 750 viewportHeight: 1334, // The height of the window is specified according to the width of the 750 device, generally 1334, also can not configure unitPrecision: ViewportUnit: "vw", // Specify the window unit to convert to. Vw selectorBlackList is recommended: ['.ignore'], // Specify a class that is not converted to Windows units. It can be customized and added indefinitely. It is recommended to define one or two generic class names minPixelValue: 1, // less than or equal to '1px' does not convert to window units, you can also set to the value you want mediaQuery: False // Allow converting 'px' in media query), require('autoprefixer')({overrideBrowserslist: [" Android 4.1 ", "iOS 7.1", "Chrome > 31", "ff > 31", "ie > = 8"], and the grid: true}),]}}; module.exports = (config, Options) = > {/ / config the first step is the webpack configuration/system/filter system of CSS and sass processing config. The module. The rules = config. The module. The rules, the filter (= > rule rule.test.toString() ! == '/\\.scss$|\\.sass$/' && rule.test.toString() ! == '/\\.css$/' ); // Configure custom CSS handling config.module.rules.push({test: /\.(CSS)$/, use: [ 'style-loader', 'css-loader', 'sass-loader', postcssLoader ] }); / / configure custom config sass processing module. Rules. Push ({test: / \. (SCSS | sass) $/, use: [ 'to-string-loader', 'css-loader', 'sass-loader', postcssLoader ], }); console.log('config ==>', config) return config };Copy the code

5> Restart the project – Remember that you must restart the project if you change the configuration file

My hi-fi design size is 375px so I set it to 375. Enter the size value on the design directly in CSS and automatically convert it to xx VW for different screen sizesCopy the code

Give me a thumbs up or follow me and update something interesting from time to time Thanks!!

  • Usage after my summary combing, has been super simple, directly copy the above code is good, if you feel that there is any question or bad place can give me a message or comment, thank you!! Common progress

Brothers and sisters, click on the wave to share fun technology!

The Denver nuggets:Juejin. Cn/user / 303430…All original good articles

CSDN:Blog.csdn.net/qq_42753705…All original good articles

Segmentfault think no:Segmentfault.com/u/jasonma19…All original good articles