webpack.conf.js 中 resolve.alias 配置

resolve: {
extensions: ['.js', '.vue'],
alias: {
'@': path.resolve(__dirname, 'src'),
'@scss': path.resolve(__dirname, 'src', 'scss'),
}
}

配置了resolve.alias 后,在js中我们可以这样用

// 原本这样写
import hongAlert from './../src/scss/icon.scss' // 现在可以这样写
import hongAlert from '@scss/icon.scss'

在scss中需要这样写,注意是~@

// 原本这样写
@import './../../../scss/mixin.scss'; // 现在可以这样写,注意是~@
@import '~@scss/icon.scss';

问题与背景

在 *.vue 中的 style 标签中,我使用 @import 引入 icon.scss 样式。由于icon需要依赖一个font/woff/ttf。而 icon.scss 和 font 文件夹是同一目录的。

而Alert.vue却和它们不同目录。那这时候编译会发生什么呢?报错~

原因和流程可能是这样的:vue将icon.scss引入后,再想引入font的时候,却发现在vue的目录中找不到font这个文件夹,所以报错了。

解决方法,是结合webpack的resolve.alias来配置绝对路径。


补充和注意点

1、如果你在js中引用scss,就不会导致这种错误。但在js中导入css总觉得怪怪的。

import '@scss/icon.scss'

2、图片路径也可以使用此方法

 .hideicon {
background-image: url("~@assets/arrow.png");
}

3、如果你使用vue-cli搭建的脚手架,要注意相对路劲的问题(weboack.config.js是放在build文件夹中的,所以需要先往上一级)

function resolve (dir) {
return path.join(__dirname, '..', dir)
} resolve: {
extensions: ['.js', '.vue', '.json', '.scss'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'@components': resolve('src/components'),
'@myComponents': resolve('src/myComponents'),
'@sass': resolve('src/sass'),
'@assets': resolve('src/assets')
}
},

4、template中的资源文件也可以这样做

<img src="~@assets/BusinessInfo_2.png" class="img1">

webpack 使用别名(resolve.alias)解决scss @import相对路径导致的问题的更多相关文章

  1. webpack中 resolve.alias 配置,@import相关踩坑

    1.在使用webpack打包项目时,可以在配置文件中配置resolve.alias来定义一些绝对路径,方便在项目中灵活使用路径,举例如下: resolve: { extensions: [‘.js‘, ...

  2. 一次解决React+TypeScript+Webpack 别名(alias)找不到问题的过程「转载」

    链接 引言 在组件开发中,业务功能和基础组件一般分开放,比如在我们的项目中,components为基础组件, container为业务组件,但是在container中调用components中的组件时 ...

  3. webpack配置别名alias出现的错误匹配

    @(webpack) webpack是一款功能强大的前端构建工具,不仅仅是针对js,它也可通过各种loader来构建相关的less,html,image等各种资源,将webpack配合流程制定工具gu ...

  4. webpack配置别名alias

    在webpack.config.js中,通过设置resolve属性可以配置查找“commonJS/AMD模块”的基路径,也可以设置搜索的模块后缀名,还可以设置别名alias.设置别名可以让后续引用的地 ...

  5. roadhog resolve alias 绝对路径 别名使用

    新建 webpack.config.js 然后加入 如下代码 module.exports = (webpackConfig, env) => { // 别名配置 const data = we ...

  6. the import java.util.* cannot be resolve,怎么解决

    我碰到这个问题是因为重装系统后,原先的JDK6换成了JDK7, Eclipse中的旧项目中jsp文件的此类import出现错误提示.在以下页面找到解决方案,专贴出来: http://www.myexc ...

  7. Eclipse代码报错提示: the import java.util cannot be resolve,怎么解决?

    显示 the import java.util cannot be resolve,如何解决?我在使用eclipse的时候, 好像无意中更改了安装位置(workspace),现在所有的包都显示无法导入 ...

  8. react import 配置路径别名'@',简化import Component的方式

    摘要 在react中,大多数业务逻辑都组件化:极大的减轻了代码的冗余度,如果组件的层次比较深的话,组件的import就比较费劲,在import时使用“../../components/test”的方式 ...

  9. Webpack代理proxy配置,解决本地跨域调试问题,同时允许绑定host域名调试

    Webpack代理proxy配置,解决本地跨域调试问题,同时允许绑定host域名调试 会撸码的小马 关注 2018.05.29 17:30* 字数 212 阅读 1488评论 0喜欢 2 接到上一章, ...

随机推荐

  1. 6-3 二叉树的重建 uva536

    已知先序和中序  求后序 可以有两种方式输出 一种是建好树按照树输出 一种是不建树  在遍历的过程中存入vector  再倒叙输出 #include<bits/stdc++.h> usin ...

  2. C++ 对Ctrl+Z的解释

    只有当Ctrl+Z单独位于一行的行首时,才表示输入的终止!(即无论何时,都推荐先回车,再Ctrl+Z,再回车结束输入) 当Ctrl+Z位于行中.行末时,输入都不会结束. (Ctrl+Z表示一个字符,其 ...

  3. linux下设置php执行命令

    第一种方法: 打开用户根目录下的: vi ~/.bash_profile # .bash_profile # Get the aliases and functions if [ -f ~/.bash ...

  4. php字符串截取

    保留字符串前面的 substr($str,start[,$length]); start  为负数 则从后面开始截取 leng为负数则返回的字符串将从 $str 结尾处向前数第 start 个字符开始 ...

  5. Unicode字符编码表(转)

    Unicode字符编码表     版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/zhenyu5211314/article/details/5153 ...

  6. Python库资源大全

    转载地址:https://zhuanlan.zhihu.com/p/27350980 本文是一个精心设计的Python框架.库.软件和资源列表,是一个Awesome XXX系列的资源整理,由BigQu ...

  7. 001.Docker简介概述

    一 简介 Docker最初是dotCloud公司的一个内部项目,诞生于 2013 年初,由google公司开源的Go语言开发. Docker是一个开源的引擎,可以轻松的为任何应用创建一个轻量级的.可移 ...

  8. Nodejs学习之mongodb Error: failed to connect to [localhost:27017]

    在连接mongodb时出现以下错误提示信息 events.js: throw er; // Unhandled 'error' event ^ Error: failed to connect to ...

  9. 推荐一个spring cloud 学习路线,绝对合理化

    最近没有时间所有没用给大家更新spring cloud 系列学习,在这先给大家奉献上我学习spring cloud 的路线 当然第一步先学习springboot然后: spring cloud eur ...

  10. vue+webpack 遇到的问题总结

    1.错误1:TypeError:this.init is not a function 解决:安装相关的加载器,npm install vue-loader vue-html-loader vue-s ...