Webpack 中 css import 使用 alias 相对路径

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/m_review/article/details/80229880

你需要提前知道的

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

alias 通道： https://doc.webpack-china.org/configuration/resolve/#resolve-alias

具体使用

在 webpack 中配置：

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

你可以这样使用：

import xxx from "Src/...";

来代替：

import xxx from "路径/src/...";

这样做的好处是：当你改变目录的位置的时候，不需要在每个引入它的地方进行更改，只需要更改 webpack 中的配置就可以了。

引用非 js 文件的静态资源

各类非 js 直接引用（import require）静态资源，会出现问题。

例如：

在 webpack 中配置：

resolve: {
  ...,
  alias: {
    'Css': resolve('css')
  }
}

错误使用：

@import "Css/...";

报错：”找不到 ‘Css’ 目录”。 说明 webpack 没有正确识别资源相对路径。

原因：css 文件会被 css-loader 处理，这里的”Css/…”会被 css-loader 当做绝对路径处理。因为我们并没有添加 css-loader 的 alias，所以报错啦。

解决：

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

1. 直接为 css-loader 添加 alias 的路径。

2. 在引用路径的字符串前面加上 ~ 的符号，如：@import “~Css/…”。webpack 会以~符号作为前缀的路径视为依赖模块去解析。

正确使用：

@import "~Css/...";

总结

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

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

例如：

• css module 中： @import “~Css/…”;
• css 属性中： backaground:url(‘~Image/…’)
• html 标签中：<img src="~Image/..."/>