nuxt项目中使用postcss-px2rem踩坑记

最近准备使用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'}
    ],
    // 不对
                    
                    

你可能感兴趣的:(前端)