Webpack代码spiltting + vue +动态css加载

Question

根据Webpack和vue-router的代码拆分建议，我在路由中使用动态导入延迟加载重页：

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

但是，如果此login.vue页面包含css的import语句，则样式未正确加载。

<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文件中）