NPM install postCSS --save-dev
2. 安装 postcss-loader
NPM install postcss-loader --save-dev
3. 配置 webpack.config.JS
- module: {
- rules: [
- {
- test: /.CSS$/,
- use: [
- 'vue-style-loader',
- 'css-loader',
- 'postcss-loader'
- ],
- }
- ]
- }
4. 在项目根目录下新建 postcss.config.JS 文件
echo.> echo.> postcss.config.JS 或 cd.> .bowerrc 或 cd.> postcss.config.JS
配置 postcss
- module.exports = {
- plugins: [
- require('postcss-px-to-viewport')({
- viewportWidth: 750, // 视窗的宽度, 对应的是我们设计稿的宽度, 一般是 750
- viewportHeight: 1334, // 视窗的高度, 根据 750 设备的宽度来指定, 一般指定 1334, 也可以不配置
- unitPrecision: 3, // 指定 px 转换为视窗单位值的小数位数 (很多时候无法整除)
- viewportUnit: 'vw', // 指定需要转换成的视窗单位, 建议使用 vw
- selectorBlackList: ['.ignore', '.hairlines'], // 指定不转换为视窗单位的类, 可以自定义, 可以无限添加, 建议定义一至两个通用的类名
- minPixelValue: 1, // 小于或等于 1px 不转换为视窗单位, 你也可以设置为你想要的值
- mediaQuery: false // 允许在媒体查询中转换 px
- })
- ]
- }
来源: http://www.qdfuns.com/note/13411/f10a57ce236a4a9ef05077854ae0a48d.html