vue项目总css使用webpack路径别名

亚亚呀亚亚

于 2019-06-28 11:21:55 发布

阅读量1k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：前端架构师成长之路 vue-cli3踩坑之旅 webstorm配置系列

本文链接：https://blog.youkuaiyun.com/yayay1010/article/details/93979117

8 篇文章

订阅专栏

6 篇文章

订阅专栏

4 篇文章

订阅专栏

解决在使用Webpack构建项目时，CSS文件中通过@import引入别名路径遇到的问题。本文介绍为何JS可以使用别名而CSS不行，并提供两种解决方案：直接为css-loader添加alias或在路径前加~符号。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JS可以用alias，css就报错

//js中:
	import tool from '@/utils/xxx' (可以引用)
	
//css中:
	@import '@/assets/css/reset.sass' (报错)

分析

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

解决

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

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

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