Vue组件中引入CSS样式的三种方式

最新推荐文章于 2024-08-19 08:00:00 发布

喜气youngyoung

最新推荐文章于 2024-08-19 08:00:00 发布

阅读量8.8k

点赞数 6

分类专栏： Vue css/less javascript 文章标签： vue.js

原文链接：https://www.cnblogs.com/lutwelve/p/16164939.html

版权

Vue 同时被 3 个专栏收录

6 篇文章 0 订阅

订阅专栏

css/less

2 篇文章 0 订阅

订阅专栏

javascript

1 篇文章 0 订阅

订阅专栏

直接上菜：

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