vue中引入css或scss

引入css

  1. 在index.html中引入
<head>
	<link rel='stylesheet' type="text/css" href="style.css">
</head><script>
// 不论在哪个子组件中引用,都会作用于全局,不存在局部作用域
import 'assets/common.css'
export default {
	name:'comopnent'
	...
}
</script><style>
@import url(style.css)
</style>
  1. 在单文件组件中引入(.vue文件)
<style src="./style.css"><style>
// 或
<style> 
@import './index.css' 
</style>
// 或
<style>
@import url('../assets/common.css');
</style>

引入scss

  1. 在脚本标签中引入
<script>
import './style.scss'
export default {
	data(){return {}}
}
<script/>
  1. 在样式标签中引入
// 此方式不受scoped的影响
<style lang="scss">
@import url(../assets/common.scss);
<style>
// 或
<style lang="scss">
@import '../assets/common.scss';
<style>

*** 注意 ***
在style标签中引入后面必须跟分号

发布了12 篇原创文章 · 获赞 13 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/qq_38868135/article/details/104069423