less 使用mixins import导入路径@/xxx.less 解析报错

分手后的思念是犯贱 2022-11-21 01:16 327阅读 0赞

## 解决：@前加~符号 ##

@import url('~@/assets/Mixins.less');

## 起因 ##

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

在 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][css-loader_ alias]，所以会报找不到 `@` 目录。

## 解决 ##

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

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

二是在引用路径的字符串最前面添加上 `~` 符号，如 `@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">`

[css-loader_ alias]: https://github.com/webpack-contrib/css-loader#alias

发表评论取消回复

表情：

评论列表（有 0 条评论，327人围观）

还没有评论，来说两句吧...

相关阅读

相关 pycharm from import导入模块报错解决

错误是这样的我在app.py中导入froms报错 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6

╰+攻爆jí腚メ/ 2023年06月16日 03:59/ 0 赞/ 28 阅读

相关 import numpy报错

在import numpy以及import tensorflow中报错如下 On entry to DGEBAL parameter number 3 had a

我会带着你远行/ 2022年12月19日 03:47/ 0 赞/ 224 阅读

相关 less 使用mixins import导入路径@/xxx.less 解析报错

解决：@前加~符号 @import url('~@/assets/Mixins.less'); 起因在用 Webpack 处理打包时，可将某一目录配置一

分手后的思念是犯贱/ 2022年11月21日 01:16/ 0 赞/ 328 阅读

相关 LESS详解之混合(Mixins)初级

　　在LESS中，有很多方式都可以称作混合。比如继承已有的样式，调用有参数的类名等。在LESS详解之混合都会为大家一一介绍的。　　继承类名　　在

墨蓝/ 2022年09月17日 13:13/ 0 赞/ 313 阅读

相关将Opencv-python导入Pycharm（import cv2报错）

由于import cv2报错记录一下我在Pycharm上尝试多次的导入opencv-python库的失败经历；首先先要知道自己的opencv-python库下到哪去了

以你之姓@/ 2022年09月16日 05:52/ 0 赞/ 262 阅读

相关 IDEA 包报错（import 报错）

idea包报错 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG

ゝ一纸荒年。/ 2022年09月02日 00:47/ 0 赞/ 367 阅读

相关 less-mixin（混合）

1、混合类选择器和id选择器编辑less： .a, b { color: red; } .mixin-class {

た入场券/ 2022年06月14日 11:12/ 0 赞/ 230 阅读

相关 less-mixin（混入）

mixin方法：一堆属性从一个规则集到另一个规则集。 1、编辑less： .bordered { border-top: dotted 1p

清疚/ 2022年06月14日 10:14/ 0 赞/ 252 阅读

相关 eclipse使用import导入项目之后js或者json报错问题解决

Eclipse菜单栏点击window->Preferences点开之后将右边build的√全部去掉，也可以只去掉对应的jsp或者json后面的√，项目会自动validate,如

朱雀/ 2022年04月22日 12:32/ 0 赞/ 433 阅读

相关 Vue-router 里 import 动态导入模块报错

router 里 import 报错 import Vue from 'vue' import Router from 'vue-router'

青旅半醒/ 2021年08月30日 11:46/ 0 赞/ 1173 阅读