Webpack 中 css import 应用 alias 相对性相对路径的方

日期:2021-01-20 类型:科技新闻 

关键词:如何织梦建站,如何创建网站,网站建立,公众号搭建,网站建站的

在用 Webpack 解决装包时,可将某1文件目录配备1某些名,编码中就可以应用与别称的相对性相对路径引入資源。

在 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 相对性相对路径的处理方法有两种;

1是立即为 css-loader 加上 ailas 的相对路径,可是在 vue-webpack 给的模版中,独立对于这个软件加上配备就显得不便冗余了;

2是在引入相对路径的标识符串最前面加上上 ~ 标记,如 @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">

参照材料

vue-webpack 資源相对路径的解决

Using url(path) with resolve.alias

CSS Loader Usage Url

总结

以上所述是网编给大伙儿详细介绍的Webpack 中 css import 应用 alias 相对性相对路径的方式,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!