[JavaScript知识库]angular9.0配置webpack将px转为rem

项目中碰到angular的px转rem,查阅资料仍走了弯路,特此记录

我px转rem用到的插件是postcss-pxtorem

首先需要安装:
1.custom-webpack 这里一定要注意自定义的webpack要与angular-cli版本相对应,我项目angular-cli版本为9.1.12,所以我这边webpack用9.1.0

npm i -D @angular-buliders/custom-webpack@9.1.0

2.postcss postcss相当于一个平台,提供一个解析器,用以解析一些css插件

npm i postcss --save-dev

3.postcss-pxtorem

npm i postcss-pxtorem

4.postcss-loader 安装loader的时候注意与项目已安装的插件版本不要相差过大

npm i postcss-loader@4.0.0

5.node-sass 项目中用的是scss 所以要装sass和对应的loader 这个也要注意版本对应,
如果项目中用到的是less,就装less

npm i node-sass@4.14.0 --save-dev

6.sass-loader

npm i sass-loader@9.0.0 --save-dev

7.css-loader

npm i css-loader --save-dev

以上,就是所有需要安装的东西了,需要注意几个问题:
版本对应问题一定要注意,我装的时候吃了不少亏;
我装sass的时候用npm安装时报错缺少Python2的环境,我又去装这个,后来发现使用cnpm安装就可以了,也没有报错.完美

接下来需要整以下几个地方:
1.在项目根目录创建 extra-webpack.config.js文件 (和angular.json 同级)

module.exports = {
    module: {
      rules: [{
        test: /\.(css|sass)$/,  //less就是/\.less$/   或者皆有 /\.(css|less|sass)$/
        use: [
          'postcss-loader',
          'sass-loader',
        ]
      }]
    }
  };

2.在angular.json 文件中个更改配置 需要替换两处，添加一处

"architect": {
 ...
 "build": {
   "builder": "@angular-builders/custom-webpack:browser",  //这里进行替换,替换为custom-webpack
   "options": {
     // 这里进行添加"customWebpackConfig"
     "customWebpackConfig": {
        "path": "./extra-webpack.config.js"
     },
     ...
   }
 },
  "serve": {
   "builder": "@angular-builders/custom-webpack:dev-server", //这里进行替换,替换为custom-webpack
   "options": {
     "browserTarget": "my-project:build"
   }
 }

3.在根目录创建postcss.config.js

module.exports = {  
    plugins: {  
      'autoprefixer': {browsers: 'last 5 version'}  
    },
    plugins: [
        require('postcss-pxtorem')({
          rootValue: 192.0, //类似px2rem中的remUnit参数  设计图尺寸width/10
          unitPrecision: 6, //  转换成rem后保留的小数点位数
          propList: ['*'],  //转换哪些px
          selectorBlackList: ['.xxx-width'], // 有关px的样式将不被转换，这里也支持正则写法
          replace: true,
          mediaQuery: false,
          exclude: /antd/i // 排除antd文件里面的rem 转换
          minPixelValue: 2, // 所有小于2px的样式都不被转换
        }),
        require("autoprefixer")() // 自动补全 moz ms webkit
      ]  
  } 

4.在index.html文件中添加

 (function() {
      document.body.style.fontSize = "14px";
      const setRem = () => {
        let vw = document.getElementsByTagName("html")[0].offsetWidth;
        document.documentElement.style.fontSize = vw /10 + "px";  // 这个fontSize根据项目情况自写
      };
      setRem();
      window.onresize = setRem;
    })();

到此已经全部配置好了
所用到的版本:angular-cli — 9.1.12
custom-webpack — 9.1.0