使用postcss-px2rem
适配已经做成功1920*1080
适配为rem
要使postcss-px2rem
生效,您需要确保已经在项目中安装了postcss-loader
和postcss-px2rem
。然后,您需要在webpack.config.js
中配置它们。以下是修改后的示例:
- 首先,确保已经安装了
postcss-loader
:
InsertCopy
npm install postcss-loader --save-dev
- 然后,在
webpack.config.js
中配置postcss-loader
:
InsertCopy
const path = require('path');
module.exports = {
// ...
module: {
rules: [
// ...
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader',
'postcss-loader' // 添加此行
]
},
// ...
]
},
// ...
};
- 接下来,确保已经安装了
postcss-px2rem
:
InsertCopy
npm install postcss-px2rem --save-dev
- 在
postcss.config.js
中配置postcss-px2rem
:
InsertCopy
module.exports = {
plugins: {
autoprefixer: {},
'postcss-px2rem': {
remUnit: 16, // 设置rem单位为16
viewBox: false, // 关闭viewBox
selectorBlackList: ['.ignore', '.hairlines'] // 排除特定选择器
}
}
};
- 确保在
vue.config.js
中配置了css.loaderOptions
:
InsertCopy
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
// ...
require('postcss-px2rem')({
remUnit: 16,
viewBox: false,
selectorBlackList: ['.ignore', '.hairlines']
})
// ...
]
}
}
}
};
现在,postcss-px2rem
应该已经生效了。
如果您已经按照上述步骤配置了postcss-px2rem
,但仍然没有看到效果,那么可能是因为以下原因:
- 确保您的
postcss.config.js
文件位于项目的根目录下。 - 确保您的
webpack.config.js
文件也位于项目的根目录下。 - 确保您的
vue.config.js
文件也位于项目的根目录下。 - 确保您的
package.json
文件中包含了postcss-loader
和postcss-px2rem
的依赖。 - 清除浏览器缓存,以便新的配置生效。
如果问题仍然存在,请检查控制台输出中是否有关于postcss-px2rem
的错误信息。