vue-cli腳手架搭建的項(xiàng)目，打包的css順序有問題，求教該怎么修改打包配置？

main.js里先引入elemnt，在引入app就好了

main.js里引用順序換一下

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue' //這里要把App的引用順序放到最后

你好，請(qǐng)問這個(gè)問題解決了嗎？我也正好遇到這個(gè)問題，所以向你請(qǐng)教一下

使用了scoped么，vue-loader在12.2.0增加了>>>功能，如果是less或者sass的話，在12.2.1可以使用/deep/

https://github.com/vuejs/vue-...

剛剛遇到這個(gè)問題了，我把element的css放在APP.vue就恢復(fù)正常了。

我也遇到了同樣的問題。。stackoverflow，vue-cli的issue都沒得到解決。。。麻煩解決的大牛說下解決方法。

 vue:v2.5.2
 main.js:
//全局插件css
import './assets/css/animate.min.css' //全局的動(dòng)畫使用
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樣式單獨(dú)引入
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' //有步驟時(shí)候的css，如入庫質(zhì)檢
import './assets/css/first-layout.css' //整個(gè)框架的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動(dòng)畫管理
import './assets/js/first-layout.js' //整個(gè)框架的js,如側(cè)邊導(dǎo)航
import './assets/js/jquery.qrcode.min.js' //條碼二維碼
import './assets/js/JsBarcode.code39.min.js' //條碼二維碼
import './assets/js/particles.js'; //首頁的背景動(dòng)畫
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ā)者平臺(tái)申請(qǐng)的密鑰 詳見 http://lbsyun.baidu.com/apiconsole/key */
    ak: 'xxx'
})

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

調(diào)試樣式后，看到所有組件里面的css樣式（加了scope的），都打包了一個(gè)css里面。如果不用這個(gè)ExtractTextPlugin插件，是否有辦法解決呢？

const ExtractTextPlugin = require('extract-text-webpack-plugin')
if (options.extract) {
  return ExtractTextPlugin.extract({
    use: loaders,
    publicPath: '../../',         // 注意配置這一部分，根據(jù)目錄結(jié)構(gòu)自由調(diào)整
    fallback: 'vue-style-loader'
  })
} else {
  return ['vue-style-loader'].concat(loaders)
}

new ExtractTextPlugin("main.css"), //抽離成一個(gè)單獨(dú)的css

我在引入iview的時(shí)候也遇到了相似的問題，然后參考上面 彩色的豆 同學(xué)的答案，解決了問題。不過我的具體業(yè)務(wù)場(chǎng)景類似下面這樣的描述：

// 在mian.js中引入了N多個(gè)樣式文件

    import './css/main.css'
    import './css/base.css'
    import './css/other.css'
    
// 希望build的時(shí)候，base.css單獨(dú)抽出來，其余的樣式build成一個(gè)文件，比如app.css
// 在我的工作場(chǎng)景中，iview.css是需要被單獨(dú)打包成一個(gè)css文件的

在 彩色的豆 同學(xué)提到的方法中，是根據(jù)文件的后綴進(jìn)行extract，但在我的工作場(chǎng)景中都是相同的.css文件后綴名，所以只能根據(jù)文件名稱進(jìn)行extract。具體的操作也是在vue-cli生成的項(xiàng)目下的build/utils.js中進(jìn)行了代碼修改：

1. styleLoaders 接口

  for (const extension in loaders) {
    const loader = loaders[extension]
    if (extension === 'css') {
      output.push({
        test: new RegExp('\\.' + extension + '$'),
        exclude: /iview\.css$/,  //必須把iview.css從這里排除掉哦，不能讓兩個(gè)ExtractTextPlugin實(shí)例同時(shí)都處理iview.css文件，不然會(huì)報(bào)錯(cuò)
        use: loader
      })
    } else {
      output.push({
        test: new RegExp('\\.' + extension + '$'),
        use: loader
      })
    }
  }
  let options1 = Object.assign({
    lovely: '1'
  }, options)   // 這里是為了用一個(gè)自定義的lovely屬性來標(biāo)記iview.css的loader
  output.push({
    test: /iview\.css$/,
    use: exports.cssLoaders(options1)['css']  
  })
  return output
}

1. cssLoaders 接口

    // Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
      console.log(!!options.lovely, '111=====')
      if (!!options.lovely) {
        return extractCommon.extract(loaders)     // lovely標(biāo)記的作用就在這里發(fā)揮啦，因?yàn)槭莍view.css才會(huì)lovely，所以，就要用這個(gè)extractCommon實(shí)例來抽取css文件
      } else {                                 
        return extractApp.extract({         // 其余的就用extractApp來處理就可以啦
          use: loaders,
          fallback: 'vue-style-loader'
        })
      }
    } else {
      return ['vue-style-loader'].concat(loaders)
    }

我自己樣式使用scss,引入組件庫的樣式是css,也出現(xiàn)了這個(gè)問題，編寫方式不一樣時(shí)，不能靠改變順序解決，我通過創(chuàng)建多個(gè)ExtractTextPlugin插件實(shí)例解決了問題：

const ExtractTextPlugin = require('extract-text-webpack-plugin')

const extractApp = new ExtractTextPlugin('static/css/[name].[contenthash].css')
const extractCommon = new ExtractTextPlugin('static/css/common.[contenthash].css')
module.exports = { extractApp, extractCommon }

（extract-text-plugin.js）
新建了2個(gè)ExtractTextPlugin實(shí)例，extractApp（用于提出自己寫的樣式scss）, extractCommon(用于引入的樣式，我的項(xiàng)目里是css)，注意這里的路徑static是在config/index.js里build下配置的assetsSubDirectory屬性

const { extractApp, extractCommon } = require('./extract-text-plugin')

if (options.extract) {
  if (loader === 'sass') {
    return extractApp.extract({
      use: loaders,
      fallback: 'vue-style-loader'
    })
  } else {
    return extractCommon.extract({
      use: loaders,
      fallback: 'vue-style-loader'
    })
  }
} else {
  return ['vue-style-loader'].concat(loaders)
}

在utils.js中引入，因?yàn)槲业臉邮绞莝css寫的，這里就這樣改了(在cssLoaders函數(shù)中)。

extractCommon,
extractApp,
// new ExtractTextPlugin({
//   filename: utils.assetsPath('css/common.[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,
// })

最后在webpack.prod.conf.js中引入這兩個(gè)實(shí)例，放到plugins屬性下，注意這里放置的順序就是打包好后在index.html中引入的順序，然后注釋掉原來的new ExtractTextPlugin({...})這個(gè)插件。

最后打包出來是兩個(gè)文件，自己scss寫的和引入的樣式分離了，通過控制引入順序就能解決覆蓋問題。

把element組件的css放到main.js的第一位，且必須與element.js間隔開，不能在一起試試吧

有一個(gè)做法是，不在main.js里引入element的css，而是在index.html中引入，然后你把你覆蓋的css，合并另一個(gè)css文件，例如叫change.css，你在index.html中的head標(biāo)簽最后引入這個(gè)change.css。
注意一些css的寫法規(guī)范，即 .parent .child{}這樣寫比.child{}優(yōu)先級(jí)高，如果實(shí)在不行，就在你要覆蓋的css樣式后面加上!important。