Javascript 在Vue JS/Vue CLI中将特定样式/CSS提取到外部文件

我有一个带有单文件组件的Vue CLI应用程序，它当前通过默认的webPack配置将CSS编译为两个文件（供应商和应用程序）

我需要能够做的是标记一些样式以写入单独的css中，这样它们就可以轻松地注入到另一个系统中，而不需要使用所有的应用程序样式

我在考虑可能使用一个自定义的

属性

，或者一个自定义的

块

，然后配置webPack将它们拉入一个单独的css文件中

傅先生{
宽度：100px；
}
.酒吧{
高度：100px；
}
.酒吧{
高度：100px；
}

我尝试使用

MiniCssExtractPlugin

配置webPack以实现此目的，它创建了两个文件，但它们都具有所有样式，我假设

MiniCssExtractPlugin

已配置为导出默认Vue webPack配置中的所有样式

配置网页包：{
插件：[新的MiniCssExtractPlugin（{filename:'css/[name]\u external.css'}）]，
模块：{
规则：[
{
resourceQuery:/blockType=externalStyle/，
用法：[MiniCssExtractPlugin.loader，'css loader']
}
]
}
},

非常感谢你的任何想法