如何在 vue.js 中进行作用域外部 css

Question

我是 vue 的新手.js看了这个视频

https://www.youtube.com/watch?v=LsoLfELhG74

这说明你可以做到

<style scoped>
</style>

限定样式的范围，但这是我将其嵌入到 HTML 页面中。如果我链接到.css文件怎么办。你怎么还能确定 css 的范围？

谢谢

Answer 1

您可以像这样向样式标记添加 src 属性：

<style scoped src="./test.css">
</style>

Answer 2

首先创建一个 scss 文件，如 styles/scss/_variables.scss.在该 _variables.scss 文件中导入所需的样式，如 $bg 颜色：红色;

接下来，将该 scss 文件导入到所需的 .vue 文件中。

<style lang="scss">
 @import "../styles/scss/_variables.scss";
 .msg {
        background-color: $bg-color;
      }
</style>