Webpack 中 css import 使用 alias 相对

在用 Webpack 处理打包时，可将某一目录配置一个别名，代码中就能使用与别名的相对路径引用资源。
在 Vue 项目中，我们通常使用 vue-webpack 脚手架生成工程模板，然后配置 @ 为项目根目录下放资源和源码的 /src 目录的别名；

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

这样我们就可以在 js 中用导入模板文件或者js就可以用如下方式导入：

import tool from '@/utils/xxx'   // 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 给的模板中，单独针对这个插件添加配置就显得麻烦冗余了；
方法是：

modules: [//添加的配置
      resolve('src'),
      resolve('node_modules')
    ],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }

这样我们就可以在vue页面如下导入css文件

@import '~assets/css/all.scss';//这里assets是src目录下的文件夹

方法二：

是在引用路径的字符串最前面添加上 ~ 符号，如下

@import '~@/assets/css/all.scss';//这里assets是src目录下的文件夹

Webpack 会将以 ~ 符号作为前缀的路径视作依赖模块而去解析，这样 @ 的 alias 配置就能生效了。
看起来还是方法二方便，不用配置webpack，直接使用。

总结

~ 视为模块解析是 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">

本文是转载，稍微补充了一些自己的观点，希望能帮助有需要的朋友吧。
原文链接：https://wiki.zthxxx.me/wiki/%E6%8A%80%E6%9C%AF%E5%BC%80%E5%8F%91/%E5%89%8D%E7%AB%AF/Webpack-%E4%B8%AD-css-import-%E4%BD%BF%E7%94%A8-alias-%E7%9B%B8%E5%AF%B9%E8%B7%AF%E5%BE%84/