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>