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

电玩女神 2023-09-30 17:23 19阅读 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>

发表评论取消回复

表情：

评论列表（有 0 条评论，19人围观）

还没有评论，来说两句吧...

相关阅读

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

直接上菜： <template> <div class='test'> <img class='test_img' :src="requi

电玩女神/ 2023年09月30日 17:23/ 0 赞/ 20 阅读

相关 CSS-初识cs 层叠样式表，引入样式的三种方式

概述 Cascading(级联) Style(样式) Sheets(工作表) 层叠样式表；CSS 负责页面样式，属于网页中的表示层；CSS 规则是由“选择器” 和 “格式

Dear 丶/ 2023年08月17日 16:19/ 0 赞/ 170 阅读

相关 vue-router中引入vue组件的两种方式

前提在vue的路由配置文件(routers.js)中，有如下两种引入组件的方式： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shado

小灰灰/ 2022年12月09日 15:00/ 0 赞/ 449 阅读

相关【css】css的三种引入方式

1.行内式  <div style="width: 100px;height: 50px;backgr

约定不等于承诺〃/ 2022年11月26日 08:39/ 0 赞/ 245 阅读

相关 CSS样式引入方式

CSS样式引入方式任务描述相关知识样式引入方式内部样式表外部样式表内部样式使

约定不等于承诺〃/ 2022年11月13日 00:48/ 0 赞/ 246 阅读

相关 HTML引入css样式的三种方式，css选择器的三种样式

文章目录前言一. css样式的三种方式第一种：内联定义方式第二种：样式块

青旅半醒/ 2022年10月05日 00:53/ 0 赞/ 256 阅读

相关 CSS(层叠样式表)的三种引入方式

1.行内样式(直接在标签内部通过使用style属性添加CSS样式) <p style="color:red;font-size:12px;">这是一个段落</p>

约定不等于承诺〃/ 2022年03月29日 04:13/ 0 赞/ 392 阅读

相关 HTML三种引入样式的方式

HTML三种引入样式的方式 1.外部样式：是通过link元素引入 <link rel="stylesheet" type="text/css" href="样式

我会带着你远行/ 2022年02月15日 07:55/ 0 赞/ 435 阅读

相关 css样式的引入方式

　　首选来介绍一下什么是CSS?(英文全称：Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子

比眉伴天荒/ 2021年10月29日 08:50/ 0 赞/ 497 阅读

相关 html样式表三种引入方式

样式表三种引入方式 1.行间样式，写在开始标签内部，优先级最高，维护性最差，尽量避免使用 2.内部样式表，写在style标签内，优点：一般不会造成样式丢失，缺点：可

阳光穿透心脏的1/2处/ 2021年09月15日 12:44/ 0 赞/ 491 阅读