共享 Vue 组件：CSS 必须由客户端手动导入

Question

我使用 TypeScript 构建了一个共享的 Vue 组件。构建后，它生成了一个单独的 CSS 文件。当客户端导入此组件时，CSS 不会自动导入。它必须显式导入。怎样才能让客户端自动导入呢？我的配置有什么问题？这是source code

例如：

import msplit from 'msplit';
import 'msplit/dist/lib/lib.css';

Vue.use(msplit);

Answer 1

在 Vue CLI 项目中，默认情况下，CSS 会在生产构建中提取到单独的文件中。

您可以在<projectRoot>/vue.config.js 中使用css.extract=false 禁用此功能：

module.exports = {
  css: {
    extract: false
  }
}