nuxt.js服务端渲染使用postcss-px2rem
在用vue做服务端渲染的时候需要对移动端做适配所以要用到postcss-2rem插件, 首先下载flexible.js可加载阿里的cdn文件 http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js将下载好的文件放到static也就是静态资源文件中下载postcss-px2remnpm install --save
·
在用vue做服务端渲染的时候需要对移动端做适配所以要用到postcss-2rem插件,
首先下载flexible.js
可加载阿里的cdn文件 http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js
将下载好的文件放到static也就是静态资源文件中
下载postcss-px2rem
npm install --save postcss-px2rem
配置nuxt.cofig.js
在head里加上
script: [
{ src: '/vipService/js/flexible.js', type: 'text/javascript', charset: 'utf-8'}
],
在build里加上
postcss: [
require('postcss-px2rem')({
remUnit: 75
})
],
完整的nuxt.config.js
module.exports = {
/*
** Headers of the page
*/
head: {
title: 'starter',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: 'Nuxt.js project' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
],
script: [
{ src: '/vipService/js/flexible.js', type: 'text/javascript', charset: 'utf-8'}
],
},
/*
** Global CSS
*/
css: [
'~/assets/css/main.css'
// {src: '~/assets/css/main.css', lang: 'less'}
],
/*
** Add axios globally
*/
build: {
vendor: ['axios', '~/plugins/tools.js'],
postcss: [
require('postcss-px2rem')({
remUnit: 75
})
],
/*
** Run ESLINT on save
*/
extend (config, ctx) {
if (ctx.isClient) {
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/
})
}
}
}
}
测试
remUnit: 75 表示1rem=75px
打开浏览器查看
更多推荐
已为社区贡献7条内容
所有评论(0)