SSR 配置postcss 自动将px转化为rem

思绪万千133

于 2020-09-02 13:38:39 发布

阅读量485

点赞数

文章标签： vue

本文链接：https://blog.youkuaiyun.com/u013611033/article/details/108360503

版权

本文介绍如何在Nuxt.js项目中配置Vant组件库以支持服务端渲染，包括使用babel-plugin-import和postcss-pxtorem插件进行按需加载和像素到rem单位转换的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如果是移动端服务端渲染,建议用vant,支持服务端渲染,

npm i babel-plugin-import --save-dev //下载babel

npm install postcss-pxtorem --save-dev //下载postcss插件

build: {
    //在构建时后编译引入的插件
    babel按需引入,但是没用
    babel: {
      plugins: [
        [
          'import',
          {
            libraryName: 'vant',
            // 目前在 nuxt 中无法按需引入样式，因此采用手动引入的方式
            style: false,
          },
          'vant',
        ],
      ],
    },
    //转rem
    postcss: {
        //该插件转化包中ui rem
      plugins: [
        require('postcss-pxtorem')({
          rootValue: 50, // 换算的基数,
          selectorBlackList: [], // 忽略转换正则匹配项 过滤掉.am-开头的class，不进行rem转换
          propList: ['*'],
        }),
      ],
    },
  },

按需引入会失败,只能在plusgin内自行一个个添加