如何将 CSS/SCSS 与 Vue 组件文件保持一致

Posted 2023-02-23

【中文标题】如何将 CSS/SCSS 与 Vue 组件文件保持一致

【英文标题】：How to keep CSS/SCSS with Vue component file

【发布时间】：2020-04-05 13:13:34

【问题描述】：

我正在创建一个我不想拥有全局 CSS 的组件库。因此，每个组件都有范围。

通过运行生产构建时 vue-cli-service build --target lib --name sc components/index.js，一切都编译成sc.css和dist/css/1.392e001d.css。

如果可能，我希望将css 和/或scss 与vue 文件或js 结合使用。

我想这样做的原因是使库的用户能够从库中导入单个组件。然后，用户可以在任何地方使用该组件，而无需导入/包含css 文件。

如果这不可能，有没有办法实现所需的功能？

【参考方案1】：

来自css.extract 的 Vue CLI 文档：

当构建为库时，您还可以将其设置为 false 以避免您的用户不得不自己导入 CSS。

// vue.config.js
module.exports = 
  css: 
    extract: false