webpack 使用别名(resolve.alias)解决scss @import相对路径导致的问题
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相对路径导致的问题的更多相关文章
- webpack中 resolve.alias 配置,@import相关踩坑
1.在使用webpack打包项目时,可以在配置文件中配置resolve.alias来定义一些绝对路径,方便在项目中灵活使用路径,举例如下: resolve: { extensions: [‘.js‘, ...
- 一次解决React+TypeScript+Webpack 别名(alias)找不到问题的过程「转载」
链接 引言 在组件开发中,业务功能和基础组件一般分开放,比如在我们的项目中,components为基础组件, container为业务组件,但是在container中调用components中的组件时 ...
- webpack配置别名alias出现的错误匹配
@(webpack) webpack是一款功能强大的前端构建工具,不仅仅是针对js,它也可通过各种loader来构建相关的less,html,image等各种资源,将webpack配合流程制定工具gu ...
- webpack配置别名alias
在webpack.config.js中,通过设置resolve属性可以配置查找“commonJS/AMD模块”的基路径,也可以设置搜索的模块后缀名,还可以设置别名alias.设置别名可以让后续引用的地 ...
- roadhog resolve alias 绝对路径 别名使用
新建 webpack.config.js 然后加入 如下代码 module.exports = (webpackConfig, env) => { // 别名配置 const data = we ...
- the import java.util.* cannot be resolve,怎么解决
我碰到这个问题是因为重装系统后,原先的JDK6换成了JDK7, Eclipse中的旧项目中jsp文件的此类import出现错误提示.在以下页面找到解决方案,专贴出来: http://www.myexc ...
- Eclipse代码报错提示: the import java.util cannot be resolve,怎么解决?
显示 the import java.util cannot be resolve,如何解决?我在使用eclipse的时候, 好像无意中更改了安装位置(workspace),现在所有的包都显示无法导入 ...
- react import 配置路径别名'@',简化import Component的方式
摘要 在react中,大多数业务逻辑都组件化:极大的减轻了代码的冗余度,如果组件的层次比较深的话,组件的import就比较费劲,在import时使用“../../components/test”的方式 ...
- Webpack代理proxy配置,解决本地跨域调试问题,同时允许绑定host域名调试
Webpack代理proxy配置,解决本地跨域调试问题,同时允许绑定host域名调试 会撸码的小马 关注 2018.05.29 17:30* 字数 212 阅读 1488评论 0喜欢 2 接到上一章, ...
随机推荐
- 配置虚拟域名,hosts文件起作用
快速打开hosts方法 开始->运行->system32->回车 当前路径文件夹drivers\etc\hosts hosts文件起作用,目前楼主知道有两个可能原因 1.刷新dns ...
- POJ2891 Strange Way to Express Integers 扩展欧几里德 中国剩余定理
欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题目传送门 - POJ2891 题意概括 给出k个同余方程组:x mod ai = ri.求x的最小正值.如果不存在这样的x, ...
- 6-7 树的层次遍历 uva122
非常不熟练 照着书大的 晚上尝试一下自己打 了解二叉树 用数组打 第一次: #include<bits/stdc++.h> using namespace std; bool fai ...
- Ubuntu+Fedora进阶学习,指令迅速查询,Bug迅速查询(Ctrl+F)
There is some notes while I am learning Ubuntu Operate System! (Ask Ubuntu & Fedora) 1-- Hard li ...
- linux 重要笔记
nginx 服务器重启命令,关闭 nginx -s reload :修改配置后重新加载生效 nginx -s reopen :重新打开日志文件nginx -t -c /path/to/ngin ...
- 二分搜索-poj2785
题目链接:http://poj.org/problem?id=2785 题目大意:要求输入A,B,C,D四个数组,从每个数组中分别取出一个数来相加,求出相加后 和为0 总共有多少种加法. #inclu ...
- Digital biquad filter
Direct Form 1 The most straightforward implementation is the Direct Form 1, which has the following ...
- POJ1125-Stockbroker Grapevine【Floyd】(模板题)
<题目链接> 题目大意: 题目可能有多组测试数据,每个测试数据的第一行为经纪人数量N(当N=0时,输入数据结束),然后接下来N行描述第i(1<=i<=N)个经纪人与其他经纪人的 ...
- 【python学习-6】异常处理
最近在网上看到了一种学习方法名叫费曼学习法,说的是学习一个东西的时候,要尝试着给别人讲出来,就是一种备课式的学习. 第一步,选择一个你想要理解的概念, 然后拿出一张白纸, 把这个概念写在白纸的最上边. ...
- [Coding Study]——目录
Coding Study Source Code for cnblogs This is the source code for coding study, you can see my Coding ...