vue中css和scss的外部引入的三种方法以及图片的引入
App.vue<template><div><img src="./assets/logo.png" alt="" /><nine-com /><eight-com /><div class="danger">DANGER</div><div><p>rain</p><p&g
·
App.vue
<template>
<div>
<img src="./assets/logo.png" alt="" />
<nine-com />
<eight-com />
<div class="danger">DANGER</div>
<div>
<p>rain</p>
<p>sky</p>
</div>
</div>
</template>
<script>
import EightCom from './components/EightCom.vue'
import NineCom from './components/NineCom.vue'
//外部文件的使用
//js css图片
//图片/:本地图片应存储在asset目录下
//外部css也是存在assets
//引入外部js
//./zhu/my这里的my.js后缀名可以忽略
import my from './zhu/my'
export default {
components: { NineCom, EightCom },
mounted() {
my.show()
}
}
</script>
<style lang="scss" scoped>
</style>
组件1EightCom.vue
<template>
<div class="eight-com">
<h1>Eight-Com</h1>
<div class="danger">DANGER</div>
<div>
<p>rain</p>
<p>sky</p>
</div>
</div>
</template>
<script>
// 外部css的三种引入方法
//第一种:
//在js中引入的特点是全局生效,这样所有的组件都能生效
//import "../assets/css/my.css"
//import "../assets/css/you.scss"
export default {}
</script>
<style lang="scss" scoped>
.eight-com {
border: 1px solid purple;
padding: 10px;
}
</style>
<style>
/* 第二种外部css的引入方法
这种方法的特点只对css生效 对scss没用 */
/* @import url("../assets/css/my.css");
@import url("../assets/css/you.scss"); */
</style>
<style lang="scss" scoped>
/*scoped的作用:只影响当前组件
但是scoped对css的没用,*/
/*
第三种外部css的引入方法(scss兼容css,css不兼容scss)
这种方法对css和scss都有用 但是要加lang="scss"并且scss不能用url()的形式*/
//@import url("../assets/css/my.css");
@import '../assets/css/you.scss';
</style>
// 由于scoped只对scss有用,所以css要局部生效就要用下面的写法
<style scoped src="../assets/css/my.css">
/* @import url("../assets/css/my.css"); */
</style>
标题组件2NineCom.vue
<template>
<div class="Nine-com">
<h1>Nine-Com</h1>
<div class="danger">DANGER</div>
<div>
<p>rain</p>
<p>sky</p>
</div>
</div>
</template>
<script>
export default {}
</script>
<style lang="scss" scoped>
.nine-com {
border: 1px solid purple;
padding: 10px;
}
</style>
外部CSS my.css
/* 写外部的css */
.danger {
color: #fff;
background-color: palevioletred;
border-radius: 4px;
padding: 10px 30px;
display: inline-block;
margin: 10px;
}
外部scss you.scss
// 外部文件
div {
p {
color: green;
border: 1px solid red;
}
}
my.js外部引入
/* 写外部的css */
.danger {
color: #fff;
background-color: palevioletred;
border-radius: 4px;
padding: 10px 30px;
display: inline-block;
margin: 10px;
}
引入成功结果
更多推荐
已为社区贡献1条内容
所有评论(0)