vue-cli2打包后css部分样式错乱

Question

使用vue-cli生成的项目。之前是webpack1.12.x的，现在升级了webpack3.6.0。vue(v2.5.2)。部分css样式错乱，检查后发现是css样式被覆盖了,加载顺序出现了问题。npm run dev，生产环境没发现这个问题。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字体图标
import './assets/css/icomoon-icons.css' //自定义字体图标
import './assets/css/icomoon2.css'  //二期自定义图标
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，如入库质检
import './assets/css/first-layout.css' //整个框架的css,如侧边导航
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,如侧边导航
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' // 导出为excle相关插件
//原型
import './golbal/vue_prototype.js'

// 百度地图
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
    // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
    ak: 'xxxxxxxx'
})

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

//vue相关插件
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 }
})

Answer 1

鼓捣半天，现在如下配置，能成功运行。还在查资料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的字体图标无法找到的问题
        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'
  }
}

Answer 2

请问解决了吗，我也是部分样式错乱 用的element