vue2.x 中scss 使用webpack 别名路径引入图片资源

Posted 2021-09-04 胖鹅68

文章目录

• 一、参考
• 二、问题描述
• 三、能否通过引入别名（绝对路径）像引入组件那样从scss中引入图片呢?
• • 为什么前面多了一个“~”，引入组件可不是这么用的？

一、参考

1. css-loader 关于url

二、问题描述

在工作中，写vue文件SCSS样式的时候，需要引入图片，此时一般采用相对路径找到文件即可，但是，由于图片分散到不同的文件夹，编写其他Vue文件的时候，都需要引用相对路径，找图片就比较麻烦了，得一层一层的去找，一旦移动Vue文件的位置，之前引入图片的路径又要一个一个修改。

三、能否通过引入别名（绝对路径）像引入组件那样从scss中引入图片呢?

答案是肯定的，有，例如：

$faceBg: url("~@/assets/images/screen/faceBg.png");
.faceCapture {
  display: flex;
  &--left {
    width: 9.39rem;
    height: 8.2rem;
    background-image: $faceBg;
    background-size: cover;
  }
}

为什么前面多了一个“~”，引入组件可不是这么用的？

这里引用 css-loader 关于url 引入的配置说明:

import assets from a node_modules path (include resolve.modules) and for alias, prefix it with a ~:

url(~module/image.png) => require('module/image.png')
url('~module/image.png') => require('module/image.png')
url(~aliasDirectory/image.png) => require('otherDirectory/image.png')

本文针对的是 vue2.x 的环境说明的