vue文件单独打包css

单独打包需要使用extract-text-webpack-plugin插件；

我用的extract-text-webpack-plugin@2.1.2这个版本，webpack用的webpack2

配置如下:

1.先定义      const ExtractTextPlugin = require('extract-text-webpack-plugin');

2.配置css和less

{
    test: /\.css$/,
    use: ExtractTextPlugin.extract({
        fallback:'style-loader',
        use:'css-loader'
    })
},
{
    test: /\.less$/,
    use: ExtractTextPlugin.extract({
        fallbackLoader: 'style-loader',
        use:[{
            loader: 'css-loader',
            options: { sourceMap: true, importLoaders: 1 }
        },{
            loader: 'less-loader',
            options: { sourceMap: true }
        }]

    })

},

3.添加plugins

new ExtractTextPlugin('css/styles.css')

4.记得修改devtool: 'source-map'

5.查看是什么模式，开发模式还是生产模式，生产模式才会打包

 

转载于:https://www.cnblogs.com/liuhuanwen/p/7412872.html