Webpack 代码拆分 + vue + 动态 css 加载

Question

遵循 Webpack 和 vue-router 的代码拆分建议，我懒得在我的路由中使用动态导入来加载繁重的页面：

const Login = () => import("../views/Login/Login.vue");

但是，如果这个 login.vue 页面包含一个 css 的导入语句，则样式没有正确加载。

<script>
import '@/assets/sass/my_login.scss'
...

如果我在我的路由中删除 Login.vue 页面的动态导入，例如

import Login from '../views/Login/Login.vue'

css 已正确加载。

我想通过使用动态导入来异步加载这个 Vue 页面，我不想让这个 css 全局，因为它只需要这个特定页面。

我如何正确加载这个 css？ Login.vue 页面或路由中是否可以使用一些神奇的语法？

感谢您的帮助

S.

Answer 1

如果您不想要全局样式，您可以在组件中编写范围样式。 你试过吗？

<style scoped>

（在您的 *.vue 文件中）