vue 里按需加載樣式文件的問題

最近一直在考慮怎么優(yōu)化自己的vue項目的問題 看到頁面上同時加載了好多樣式文件 想著怎么實現(xiàn)按需加載 并且避免樣式錯亂
之前給每個組件添加了scoped屬性 以為這樣可以解決樣式錯誤問題 但是還是不行 網(wǎng)上查了一下 好像還需要用到extract-text-webpack-plugin這個插件 但是我是用vue-cli構(gòu)建的項目 有這個插件呢 為什么還是會出現(xiàn)樣式錯亂 并且樣式文件也不是按需加載的 我用的是less 這是為什么 是需要改下webpack配置文件嗎

var path = require('path')
var fs = require('fs')
var utils = require('./utils')
var config = require('../config')
var vueLoaderConfig = require('./vue-loader.conf')

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

module.exports = {
entry: {

app: './src/main.js'

},
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'),
  'components': path.resolve(__dirname,'../src/components'),
  'assets': path.resolve(__dirname,'../src/assets'),
  'js': path.resolve(__dirname,'../src/js'),
  'api': path.resolve(__dirname, '../src/api'),
  'service': path.resolve(__dirname, '../src/service'),
  'tools': path.resolve(__dirname, '../src/tools')
},
symlinks: false

},
module: {

rules: [{
    test: /\.vue$/,
    loader: 'vue-loader',
    options: vueLoaderConfig
  },
  {
    test: /\.js$/,
    loader: 'babel-loader',
    include: [resolve('src'), resolve('test'),resolve('node_modules/vue-confirm')]
  },
  {
    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]')
    }
  },
  {
    test: /iview.src.*?js$/,
    loader: 'babel-loader'
  },
  {
    test: /\.js$/,
    loader: 'babel-loader',
    exclude: /node_modules/
  }
]

}
}