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>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;
}

引入成功结果