Webpack 中 css import 使用 alias 相对路径

栏目: 编程工具 · 发布时间: 6年前

内容简介:在用 Webpack 处理打包时,可将某一目录配置一个别名,代码中就能使用与别名的相对路径引用资源。在 Vue 项目中,我们通常使用这样我们就可以在 js 文件中用形如

在用 Webpack 处理打包时,可将某一目录配置一个别名,代码中就能使用与别名的相对路径引用资源。

在 Vue 项目中,我们通常使用 vue-webpack 脚手架生成工程模板,然后配置 @ 为项目根目录下放资源和源码的 /src 目录的别名;

...,
resolve: {
  ...,
  alias: {
    '@': resolve('src')
  }
}
复制代码

这样我们就可以在 js 文件中用形如 import tool from '@/utils/xxx' 的方式引用 /src/utils/xxx.js 文件,并且 Webpack 能正确识别并打包。

但是在 css 文件,如 less, sass, stylus 中,使用 @import "@/style/theme" 的语法引用相对 @ 的目录确会报错,"找不到 '@' 目录",说明 webpack 没有正确识别资源相对路径。

分析

原因是 css 文件会被用 css-loader 处理,这里 css @import 后的字符串会被 css-loader 视为绝对路径解析,因为我们并没有添加 css-loader 的 alias ,所以会报找不到 @ 目录。

解决

在 Webpack 中 css import 使用 alias 相对路径的解决办法有两种;

一是直接为 css-loader 添加 ailas 的路径,但是在 vue-webpack 给的模板中,单独针对这个插件添加配置就显得麻烦冗余了;

二是在引用路径的字符串最前面添加上 ~ 符号,如 @import "~@/style/theme" ;Webpack 会将以 ~ 符号作为前缀的路径视作依赖模块而去解析,这样 @ 的 alias 配置就能生效了。

总结

~ 视为模块解析是 webpack 做的事,不是 css-loader 做的事。

各类非 js 直接引用( import require )静态资源,依赖相对路径加载问题,都可以用 ~ 语法完美解决;

例如 css module 中: @import "~@/style/theme"

css 属性中: background: url("~@/assets/xxx.jpg")

html 标签中: <img src="~@/assets/xxx.jpg" alt="alias">


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

算法设计与分析

算法设计与分析

陈慧南 / 电子工业出版社 / 2006-5 / 26.80元

《算法设计与分析:C++语言描述》内容分为3部分:算法和算法分析、算法设计策略及求解困难问题。第1部分介绍问题求解方法、算法复杂度和分析、递归算法和递推关系;第2部分讨论常用的算法设计策略:基本搜索和遍历方法、分治法、贪心法、动态规划法、回溯法和分枝限界法;第3部分介绍NP完全问题、随机算法、近似算法和密码算法。书中还介绍了两种新的数据结构:跳表和伸展树,以及它们特定的算法分析方法,并对现代密码学......一起来看看 《算法设计与分析》 这本书的介绍吧!

html转js在线工具
html转js在线工具

html转js在线工具

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换