VUE项目引入mandMobile 样式错乱

1.有时候引入前端框架，可能组件的样式变了，造成这一问题的原因是

有的矿建是以px作为组件样式加载，有的框架是以rem作为组件样式加载，所以用到的加载类不一样，

2.mandMobile 样式错乱就是上述问题引起

再utils.js中找到

 // generate loader string to be used with extract text plugin
  function generateLoaders (loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]

    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }

看这个逻辑

options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]

可以看到并不支持rem

3需要先引入px2remLoader

1. 安装lib-flexible

npm i lib-flexible --save

1. 在项目入口文件main.js中引入lib-flexible

import 'lib-flexible/flexible.js'

在项目根目录的index.html 头部删除自动生成的meta标签, lib-flexible会根据屏幕自动生成相对于的meta标签
// 删除
<meta name="viewport" content="width=device-width, initial-scale=1.0">
安装px2rem-loader
在实际的开发中，使用flexible插件时 会自动把px转换成rem单位。在vue-cli中安装过lib-flexible之后 ，将px转换成rem，我们将使用px2rem这个工具，

npm install px2rem-loader
1
配置px2rem-loader
修改build/utils.js, 在cssLoader变量中

const cssLoader = {
    loader: 'css-loader',
    options: {
      sourceMap: options.sourceMap,
      importLoader: 5 // 在加载cssLoader之前加载的loader个数
    }
  }
  const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      emUnit: 75 // 设计稿的1/10  //这个75是设计图的十分之一，如设图是750，即是75，设计图640，即,64
    }
  }
  // 在后面的函数中
  function generateLoaders(loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]
    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }

 

或者直接替换为 

// generate loader string to be used with extract text plugin

function generateLoaders (loader, loaderOptions) {

const loaders = [cssLoader,px2remLoader]

 

if (loader) {

loaders.push({

loader: loader + '-loader',

options: Object.assign({}, loaderOptions, {

sourceMap: options.sourceMap

})

})

}

注意main中 的加载顺序

import Vue from 'vue'

import 'lib-flexible/flexible'

import mandMobile from 'mand-mobile'

import 'mand-mobile/lib/mand-mobile.css'

import App from './App'

import router from './router'

import HttpRequest from '@/utils/http'