vue-cli2打包后css部分樣式錯亂

使用vue-cli生成的項目。之前是webpack1.12.x的，現(xiàn)在升級了webpack3.6.0。vue(v2.5.2)。部分css樣式錯亂，檢查后發(fā)現(xiàn)是css樣式被覆蓋了,加載順序出現(xiàn)了問題。npm run dev，生產(chǎn)環(huán)境沒發(fā)現(xiàn)這個問題。webpack1.12.x也沒這個問題。

不知道是否是這個插件問題，ExtractTextPlugin。或者是我引用了bootstrap和element-ui有沖突。之前項目是用的bootstrap,升級后才換的element.
ps:webpack3.6.0的配置都是官方的模板，自己沒動什么其他地方。
需要哪部分代碼可以提問告知。?

new ExtractTextPlugin({
      filename: utils.assetsPath('css/[name].[contenthash].css'),
      // Setting the following option to `false` will not extract CSS from codesplit chunks.
      // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
      // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`, 
      // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
      allChunks: true,
    }),

main.js

//全局插件css
import './assets/css/animate.min.css' //全局的動畫使用
import './assets/css/themify-icons.css' //theimfy字體圖標(biāo)
import './assets/css/icomoon-icons.css' //自定義字體圖標(biāo)
import './assets/css/icomoon2.css'  //二期自定義圖標(biāo)
import 'element-ui/lib/theme-chalk/index.css' //element樣式單獨引入
import './assets/css/element-variables.scss' //自定義主題顏色等
import '../node_modules/bootstrap/dist/css/bootstrap.min.css'
// import './assets/css/sweet-alert.css' //彈窗樣式，如果用ele，考慮后期干掉
import './assets/css/jquery.steps.css' //有步驟時候的css，如入庫質(zhì)檢
import './assets/css/first-layout.css' //整個框架的css,如側(cè)邊導(dǎo)航
import './assets/css/common.css' //全局公共樣式
import './assets/css/reset-element.css'; //重置element-ui的css
//全局插件js
import $ from 'jquery'
import '../node_modules/bootstrap/dist/js/bootstrap.min.js'
import './assets/js/animo.min.js' //animate動畫管理
import './assets/js/first-layout.js' //整個框架的js,如側(cè)邊導(dǎo)航
import './assets/js/jquery.qrcode.min.js' //條碼二維碼
import './assets/js/JsBarcode.code39.min.js' //條碼二維碼
import './assets/js/particles.js'; //首頁的背景動畫
import './assets/js/jquery.table2excel.js' // 導(dǎo)出為excle相關(guān)插件
//原型
import './golbal/vue_prototype.js'

// 百度地圖
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
    // ak 是在百度地圖開發(fā)者平臺申請的密鑰 詳見 http://lbsyun.baidu.com/apiconsole/key */
    ak: 'xxxxxxxx'
})

//element-ui
import ElementUI from 'element-ui'
Vue.use(ElementUI); //elment-ui

//vue相關(guān)插件
import Vue from 'vue'
import App from './App'

import router from './router' //引用路由
import store from './store/'


new Vue({
    el: '#app',
    router,
    store,
    template: '<App/>',
    components: { App }
})

回答

編輯回答

風(fēng)清揚

鼓搗半天，現(xiàn)在如下配置，能成功運行。還在查資料ing

build/utils.js

...
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
        })
      })
    }

    // Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        publicPath: '../../',         // 解決css的字體圖標(biāo)無法找到的問題
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }
...

build/webpack.base.conf.js

'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')
var webpack = require('webpack')
const ExtractTextPlugin = require('extract-text-webpack-plugin')

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}



module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js',
  },
  plugins: [
    new ExtractTextPlugin({filename: "main.css", allChunks: true}), //抽離成一個單獨的css
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "windows.jQuery": "jquery"
    })
    
  ],
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
        // options: {loaders:{
        //   css: ExtractTextPlugin.extract({
        //       use: 'css-loader',
        //       fallback: 'vue-style-loader'
        //   })
        // }}
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('../src'), resolve('test')]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('media/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  },
  node: {
    // prevent webpack from injecting useless setImmediate polyfill because Vue
    // source contains it (although only uses it if it's native).
    setImmediate: false,
    // prevent webpack from injecting mocks to Node native modules
    // that does not make sense for the client
    dgram: 'empty',
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
    child_process: 'empty'
  }
}

2017年11月25日 00:26