最新消息:看到那些跳动的图片、文字了吗?点击点击 O(∩_∩)O~~

webpack 引用模块路径中包含了~

开发工具 onlyling 1781浏览 0评论

在使用 webpack 开发的时候,引入一个模块

import xx from '../../../xxx/xxx'

通过会是上面这样的,但相对路径写着有点繁琐,就设置一个 alias 吧。

例如

resolve: {
  ...,
  alias: {
    '@': resolve('src')
  }
}

配置 @ 为项目根目录下放资源和源码的 /src 目录的别名。


import Utils from '@/utils'

于是就可以这样引入模块。

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

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

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

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

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

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

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

转载请注明:OnlyLing - Web 前端开发者 » webpack 引用模块路径中包含了~

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址