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'