Vue中CSS引入方式

Vue引入CSS方式一般有三种

直接上代码

<template>
  <div class='test'>
    <img class='test_img' :src="require(`@/assets/img/cat.png`)" />
  </div>
</template>

<script>
  /**
   * @description 1、通过script中引入，作为全局引入。
  */
  import '@/assets/light-theme/index.scss';
  import '@/assets/dark-theme/index.scss';

  const imgDog = require('@/assets/svg/dog.svg');

<script/>

/**
 * @description 2、通过style中的src引入，加上scoped能成为块级作用域 不影响其他组件。
*/
<style lang='scss' scoped src='./index.scss'></style>

/**
 * @description 3、通过style中的@import引入，不受scoped作用，会成为全局样式。
 * @remark 可以使用url引入外网样式 类似于<link rel="stylesheet" href='https://csdnimg.cn/release/bl.css'></link>
*/
<style lang='scss' scoped>
@import '~@/assets/light/index.scss';
@import url('https://csdnimg.cn/release/bl.css');
@import './index.scss';

.import_test {
  .&_img {
    background: url('~@/assets/img/blueSky.png');
  }
}
</style>