javascript - 为什么我配置的webpack只打包.vue内部样式 单独的样式表文件打包不了？

Question

var path = require('path')
var config = require('../config')
var utils = require('./utils')
var projectRoot = path.resolve(__dirname, '../')

const webpack = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
entry: {

app: './src/main.js'

},
output: {

path: config.build.assetsRoot,
publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath,
filename: '[name].js'

},
resolve: {

extensions: ['', '.js', '.vue','css'],
fallback: [path.join(__dirname, '../node_modules')],
alias: {
  'src': path.resolve(__dirname, '../src'),
  'assets': path.resolve(__dirname, '../src/assets'),
  'components': path.resolve(__dirname, '../src/components')
}

},
resolveLoader: {

fallback: [path.join(__dirname, '../node_modules')]

},
module: {

loaders: [
  {
    test: /\.vue$/,
    loader: 'vue'
  },
  {
    test: /\.js$/,
    loader: 'babel',
    include: projectRoot,
    exclude: /node_modules/
  },
  {
    test: /\.json$/,
    loader: 'json'
  },
  {
    test: /\.html$/,
    loader: 'vue-html'
  },
  {
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url',
    query: {
      limit: 10000,
      name: utils.assetsPath('img/[name].[hash:7].[ext]')
    }
  },
    {
test: /\.css$/,
 loader:  ExtractTextPlugin.extract("style-loader","css-loader")

},

  {
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    loader: 'url',
    query: {
      limit: 10000,
      name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
    }
  }
      
]
  

},

plugins:[

   new ExtractTextPlugin("/assets/main.css"),

]

,

vue: {

loaders: utils.cssLoaders()

}
}

Answer 1

添加对于less/sass/css文件的loader

Answer 2

// 以前自己写的配置 
vue: {
    autoprefixer: {
      browsers: ['last 3 versions', '> 1%', 'ie_mob 11']
    },
    loaders: {
      sass: ExtractTextPlugin.extract('style-loader', 'css!autoprefixer!sass'),
      js: 'babel'
    }
  }


// 不知道你这个代码里写的啥， 
utils.cssLoaders()