仅当组件已在 Vue.js 中导入时才加载样式

Question

我有一个 Vue.js 项目，使用 Vue UI 和 Webpack 项目，使用路由器用于多个“页面”。我正在使用 SASS (SCSS) 部分并将它们导入到各个组件中。

<style lang="sass">
@import "@/css/modules/_style-guide.scss";
</style>

在每个“页面”上，SASS（实际上是渲染的 CSS）被加载到所有组件的头部的 DOM 中，即使它们没有被导入到“页面”中。

添加“scoped”选项仍会加载所有 SASS 文件，只需添加唯一的 guid。

我宁愿仅在“页面”上存在组件时才导入 SASS。

有没有办法做到这一点？

Answer 1

您不仅需要包含scoped，还需要为所有组件实现延迟加载。

如果你像这样导入：

import vue from 'vue'
import MyComponent from '/where/it/is'
vue.component('my-component', MyComponent)

那么你可以将其更改为

import vue from 'vue'
const MyComponent = () => import(/* webpackChunkName: "unique-chunk-name" */ '/where/it/is')
vue.component('my-component', MyComponent)

现在 MyComponent 是延迟加载的 - 当它加载到页面上时，它只会完全加载包的 .js 和 .css 部分