1> npm i @angular-builders/custom-webpack --save-dev (angular项目本身不允许配置,步骤 1 2为它添加自定义配置)
2>修改angular.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"
}
}
3>npm i --save-dev to-string-loader css-loader postcss-import postcss-px-to-viewport postcss-scss postcss-url precss (屏幕适配所需要的所有依赖)
npm i --save-dev to-string-loader css-loader postcss-import postcss-px-to-viewport postcss-scss postcss-url precss
4>在根下面新建webpack.config.js配置文件
console.log('webpack.config.js配置文件执行了...')
// postcss插件
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, // 视窗的宽度,对应的是我们设计稿的宽度,一般是750
viewportHeight: 1334, // 视窗的高度,根据750设备的宽度来指定,一般指定1334,也可以不配置
unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数
viewportUnit: "vw", //指定需要转换成的视窗单位,建议使用vw
selectorBlackList: ['.ignore'], // 指定不转换为视窗单位的类,可以自定义,可以无限添加,建议定义一至两个通用的类名
minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位,你也可以设置为你想要的值
mediaQuery: false // 允许在媒体查询中转换`px`
}),
require('autoprefixer')({
overrideBrowserslist: [
"Android 4.1",
"iOS 7.1",
"Chrome > 31",
"ff > 31",
"ie >= 8"
],
grid: true
}),
]
}
};
module.exports = (config, options) => {
// config就是系统的webpack配置
// 第一步过滤掉系统的css和sass处理
config.module.rules = config.module.rules.filter(
rule => rule.test.toString() !== '/\\.scss$|\\.sass$/' && rule.test.toString() !== '/\\.css$/'
);
// 配置自定义的css处理
config.module.rules.push({
test: /\.(css)$/,
use: [
'style-loader',
'css-loader',
'sass-loader',
postcssLoader
]
});
// 配置自定义的sass处理
config.module.rules.push({
test: /\.(scss|sass)$/,
use: [
'to-string-loader',
'css-loader',
'sass-loader',
postcssLoader
],
});
console.log('config ==>', config)
return config
};
5>重启项目 - 记住改了配置文件必须重启
我的高保真设计稿尺寸为375px 所以我配置的是375 ,在css中直接输入设计稿上的尺寸值,自动转换为不同屏幕下的适配单位 xx vw
高抬贵手,为我点个赞或者关注一下我哦,不定期更新一些有趣的东西 Thanks!!!
- 用法经过我的总结梳理,已经超级简单了,直接复制上面代码就好,如果觉得有任何疑问的或者讲的不好的地方可以给我留言或者评论,谢谢大家!!! 共同进步
兄弟姐妹们,点波关注吧,一起分享有趣的技术!
掘金: juejin.cn/user/303430… 全部原创好文
CSDN: blog.csdn.net/qq_42753705… 全部原创好文