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

分手后的思念是犯贱 2022-11-21 01:16 331阅读 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 条评论，331人围观）

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

相关阅读

相关模块导入报错：Python路径理解误区

在Python编程中，当进行模块导入时遇到错误，这通常与Python的路径处理不准确有关。以下是一些常见的误解和解决方法： 1. **忘记添加模块路径**：当你在一个

落日映苍穹つ/ 2025年01月01日 21:48/ 0 赞/ 22 阅读

相关 Python模块导入失败：'import module_name'报错

在Python中，如果遇到`import module_name`报错，可能是以下几个原因： 1. **模块名拼写错误**：确保你输入的模块名称是正确的。例如，如果应导入的是

淩亂°似流年/ 2024年12月26日 06:48/ 0 赞/ 27 阅读

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

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

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

相关 import numpy报错

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

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

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

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

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

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

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

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

相关 IDEA 包报错（import 报错）

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

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

相关 less-mixin（混合）

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

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

相关 less-mixin（混入）

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

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

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

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

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