webpack4 less同步css,webpack4 mini-css-extract-plugin less分离打包问题

const path = require(‘path’)

const merge = require(‘webpack-merge’)

const baseConfig = require(‘./webpack.config.base’)

const CleanWebpackPlugin = require(‘clean-webpack-plugin’)

const MiniCssExtractPlugin = require(‘mini-css-extract-plugin’)

const OptimizeCssAssetsPlugin = require(‘optimize-css-assets-webpack-plugin’)

const UglifyJsPlugin = require(‘uglifyjs-webpack-plugin’)

const CopyWebpackPlugin = require(‘copy-webpack-plugin’)

function resolve(dir) {

return path.join(__dirname, '.', dir)

}

module.exports = merge(baseConfig, {

mode: 'production',

// devtool: 'source-map',

entry: './src/main.js',

output: {

// publicPath: './',

filename: 'js/[name].[hash:7].js',

path: resolve('dist')

},

module: {

rules: [{

test: /\.css$/,

use: [

{

loader: MiniCssExtractPlugin.loader,

options: {

minimize: true

}

},

'css-loader'

]

}, {

test:/\.less$/,

use:[

MiniCssExtractPlugin.loader,

'css-loader',

'less-loader'

]

}]

},

optimization: {

splitChunks: {

cacheGroups: {

vendors: {

name: 'chunk-vendors',

test: /[\\\/]node_modules[\\\/]/,

priority: -10,

chunks: 'initial'

},

common: {

name: 'chunk-common',

minChunks: 2,

priority: -20,

chunks: 'initial',

reuseExistingChunk: true

}

}

},

minimizer: [

new OptimizeCssAssetsPlugin({}),

new UglifyJsPlugin({

uglifyOptions: {

ecma: 6,

cache: true,

parallel: true,

cache: true,

sourceMap: true

}

})

]

},

plugins: [

new CleanWebpackPlugin(['dist']),

new MiniCssExtractPlugin({

filename: 'css/[name].[hash:7].css',

chunkFilename: 'css/[name].[hash:7].css'

}),

new CopyWebpackPlugin([{

from: path.join(__dirname, 'static'),

to: path.join(__dirname, '.', 'dist', 'static'),

toType: 'dir',

ignore: [

'.DS_Store',

'.gitkeep',

'template.ejs'

]

}])

]

})

报错信息：

ERROR in ./src/Msg.vue?vue&type=style&index=0&lang=less& (./node_modules/_vue-loader@15.6.0@vue-loader/lib??vue-loader-options!./src/Msg.vue?vue&type=style&index=0&lang=less&) 13:0

Module parse failed: Unexpected character '@' (13:0)

You may need an appropriate loader to handle this file type.

|

|

> @import url('./assets/style/common.less');