引入css
- 在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>
- 在单文件组件中引入(.vue文件)
<style src="./style.css"><style>
// 或
<style>
@import './index.css'
</style>
// 或
<style>
@import url('../assets/common.css');
</style>
引入scss
- 在脚本标签中引入
<script>
import './style.scss'
export default {
data(){return {}}
}
<script/>
- 在样式标签中引入
// 此方式不受scoped的影响
<style lang="scss">
@import url(../assets/common.scss);
<style>
// 或
<style lang="scss">
@import '../assets/common.scss';
<style>
*** 注意 ***
在style标签中引入后面必须跟分号