最近准备使用nuxt开发一个移动端的项目,在做技术调研时发现一款可以自动适配px和rem的神器,名为postcss-px2rem。于是,怀着激动的心情我开始了px2rem 的采坑记。
第一步下载:
npm install postcss-px2rem –save
第二步引入项目:(经过测试这步可以 省去)
const px2rem = require(‘postcss-px2rem’)
第三步配置webpack
build: {
/*
** Run ESLint on save
*/
extend (config, { isDev, isClient }) {
if (isDev && isClient) {
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/
})
}
},
postcss: [
require('postcss-px2rem')({
remUnit: 75
})
],
}
下面是一份nuxt的配置文件,希望对大家有帮助
// nuxt.config.js 文件配置
const path = require('path')
module.exports = {
// Headers of the page
head: {
title: '默认共用title',
meta: [
{ charset: 'utf-8' },
{ 'http-equiv': 'pragma', content: 'no-cache' },
{ 'http-equiv': 'cache-control', content: 'no-cache' },
{ 'http-equiv': 'expires', content: '0' },
{ content: 'telephone=no', name: 'format-detection' }
],
// html head 中创建 script 标签
script: [
{ innerHTML: require('./assets/js/flexible_nuxt'), type: 'text/javascript', charset: 'utf-8'}
],
// 不对<script>标签中内容做转义处理
__dangerouslyDisableSanitizers: ['script']
},
// Global CSS
css: ['~/assets/css/reset.css', '~/assets/css/main.less'],
// Global env
env: {
__ENV: process.env.__ENV
},
build: {
vendor: ['axios'],
postcss: [
require('postcss-px2rem')({
remUnit: 75
})
],
extend (config, ctx) {
if (ctx.isClient) {
// 拓展 webpack 配置
config.entry['polyfill'] = ['babel-polyfill']
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/
})
// 添加 alias 配置
Object.assign(config.resolve.alias, {
'utils': path.resolve(__dirname, 'utils')
})
}
}
},
plugins: [{src: '~plugins/toast', ssr: false}, {src: '~plugins/dialog', ssr: false}]
}