webpack + vue之抽离style样式css方法
文章 3477 0 0 0
发布时间:2019年05月21日

概述

大部分使用过webpack的朋友都知道,抽离css需要使用到webpack的插件extract-text-webpack-plugin,vue也不例外。官方给的vue-loader的文档里面有这样的描述
不要在style上添加scss或者less,否则你要去配置他们的抽离

我们现在抽离.vue文件下的style的css样式,zmz在测试了很多得出以下不是结论的结论,由于第一次玩没有别人指点走了不少弯路,现在总结如下,

抽离普通css样式,(适合style默认lang)

module: {
    rules: [
        {     //处理js中引入的css
            test: /.css$/,
            loader: ExtractTextPlugin.extract({
                use: [
                    {
                        loader: 'css-loader'
                    }
                ]
            })
        },
        {
            test: /.vue$/,
            loader: 'vue-loader',
            options: {loaders:{
                css: ExtractTextPlugin.extract({
                    use: 'css-loader',
                    fallback: 'vue-style-loader'
                })
            }}
        }
    ]
},
plugins: [ //这个不添加allChunks参数的话,不会抽离chunk的css
    new ExtractTextPlugin({filename: 'css/[name].[hash:5].css', allChunks: true})
]
评论专区