欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

在使用@angular/cli创建的angular项目上添加postcss等一系列移动端自适应插件

程序员文章站 2023-12-23 12:42:28
首先使用yarn或npm安装@angular-builders/custom-webpack,然后安装postcss-loader post-px-to-viewport postcss-flexbugs-fixes postcss-preset-envviewport-units-buggyfill.在根目录下新建webpack文件夹,建立webpack.config.js,建立postcss.config.js,用于配置css预处理。修改angular.json配置的build打包配置......

首先使用yarn或npm安装  @angular-builders/custom-webpack,然后安装postcss-loader  post-px-to-viewport  postcss-flexbugs-fixes postcss-preset-env viewport-units-buggyfill.

在根目录下新建webpack文件夹,建立webpack.config.js,建立postcss.config.js,用于配置css预处理。

修改angular.json配置的build打包配置,和serve开发配置,build打包配置下的builder修改为:

"@angular-builders/custom-webpack:browser"模式,此模式可以在多种情况下被调用。第一种情况是直接打包时调用,它会加上production生产环境参数,第二种情况是serve开发模式下调用。

修改serve下的builder为:"@angular-builders/custom-webpack:dev-server",它运行时会直接调用build下的builder运行,不带生产环境参数

在build打包配置下options下添加:

"customWebpackConfig":{

     "path":"./webpack/webpack.config.dev.js", //相对于项目根路径

    "mergeStrategies": { //webpack配置合并方式

        "externals": "replace" //替换

    }

},

webpack.config.js里的配置:

module.exports = (config, options)=>{

//options即是angular.json里配置它时的options

//config 即是系统已经自定义配置好的webpack配置(与手动搭建框架的配置参数相同),可根据需要自定义修改

//console.log(config.module.rules) 过滤掉要配置的

config.module.rules = config.module.rules.filter(

    rule => rule.test.toString() !== "/\\.scss$|\\.sass$/"

)

 

config.module.rules.push({

test: /\.scss$|\.sass$/,

use: [

{

loader: 'raw-loader' //与react,vue不同,angular加载css样式是使用law-loader

},

{

loader: 'postcss-loader',

options: {

config: {

path: './webpack/postcss.config.js'

}

}

},

{

loader: 'sass-loader'

},

]

});

 

return config;

}

下面是postcss.config.js文件:

module.exports = {

plugins:[

require('autoprefixer'),

require('postcss-flexbugs-fixes'),

require('postcss-preset-env')({

stage:3

}),

// require('postcss-pxtorem')({

// rootValue:75,

// propList:['*','!font*'],

// minPixelValue:2

// }),

require('postcss-px-to-viewport')({

unitToConvert:'px', //要转换的单位,

viewportWidth:750, //视口宽度(设计稿)

viewportHeight:1334, //视口高度(设计稿)

propList: ['*',],//'!font*'

viewportUnit:'vw', //转换之后的单位

minPixelValue:2,

mediaQuery:true, //允许在媒体查询中进行px转换

unitPrecision: 3, //允许vw单位转换之后保存的小数位数

landscape: true, // 允许横屏模式,如果设置为flase,手机横屏的时候,布局会很难看

landscapeUnit: 'vw', //允许横屏时的单位

fontViewportUnit: 'vmin', //字体要转换成的单位,始终选择vmin,避免因旋转的影响

landscapeWidth: 1334, //设置横屏模式的width

selectorBlackList: [/ant*/] // 不转换为vw的

})

]

}

viewport-units-buggyfill插件是做vw的兼容处理的,在main.ts中引入,并使用:

const hacks = require('viewport-units-buggyfill/viewport-units-buggyfill.hacks');

require('viewport-units-buggyfill').init({hacks:hacks});

如果在开发的Terminal报警告,则先在全局的tsconfig.app.json的compilerOptions的types数据里添加'node',

"compilerOptions": {

"outDir": "./out-tsc/app",

"types": ["node"]

},

再在angular.json的bulid打包配置的options下添加配置"allowedCommonJsDependencies":["viewport-units-buggyfill"]

"build": {

"builder": "@angular-builders/custom-webpack:browser",

"options": {

"allowedCommonJsDependencies": [

"viewport-units-buggyfill"

],

"customWebpackConfig":{

"path":"./webpack/webpack.config.js",

"mergeStrategies": {

"externals": "replace"

}

},

"outputPath": "dist/ng-todo",

"index": "src/index.html",

"main": "src/main.ts",

"polyfills": "src/polyfills.ts",

"tsConfig": "tsconfig.app.json",

"aot": true,

"assets": [

"src/favicon.ico",

"src/assets"

],

"styles": [

"src/styles.scss"

],

"scripts": []

},

"configurations": {

"production": {

"fileReplacements": [

{

"replace": "src/environments/environment.ts",

"with": "src/environments/environment.prod.ts"

}

],

"optimization": true,

"outputHashing": "all",

"sourceMap": false,

"extractCss": true,

"namedChunks": false,

"extractLicenses": true,

"vendorChunk": false,

"buildOptimizer": true,

"budgets": [

{

"type": "initial",

"maximumWarning": "2mb",

"maximumError": "5mb"

},

{

"type": "anyComponentStyle",

"maximumWarning": "6kb",

"maximumError": "10kb"

}

]

}

}

},

本文地址:https://blog.csdn.net/HZZOU/article/details/107551130

上一篇:

下一篇: