webpack 使用别名(resolve.alias)解决scss @import相对路径导致的问题
2018-02-10 15:12
2983 查看
webpack.conf.js 中 resolve.alias 配置
配置了resolve.alias 后,在js中我们可以这样用
在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总觉得怪怪的。
2、图片路径也可以使用此方法
3、如果你使用vue-cli搭建的脚手架,要注意相对路劲的问题(weboack.config.js是放在build文件夹中的,所以需要先往上一级)
4、template中的资源文件也可以这样做
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 简化相对路径 import
- WebPack系列:Webpack编译的代码如何在tomcat中使用时静态资源路径不对的问题如何解决
- asp.net用户控件中使用相对路径的解决方法--------图片路径问题(用户控件、图片路径),ResolveUrl
- Webpack中使用相对路径定义别名
- 14.如何解决使用webpack打包之后,font-awsome路径不对的问题,终极解决方法
- webpack打包过程中因为图片的路径导致的问题
- asp.net 用户控件中 使用相对路径的解决方法-------- 图片路径问题(用户控件、图片路径) ,ResolveUrl
- nhibernate 使用access数据库 相对路径问题解决
- 使用webpack.DllPlugin与webpack.DllReferencePlugin解决webpack打包慢问题
- 在webpack的less中使用绝对路径import
- webpack使用css-loader?sourceMap导致font(eot、ttf)等无法加载问题
- Asp.Net连接ACCESS数据库相对路径问题,web.config中如何使用相对路径及在类文件中调用这个相对路径
- 解决使用CFileDialog造成的ADO访问相对路径下的数据库出错问题
- webpack 打包成相对路径 css url路径问题
- 使用webpack打包的后,公共请求路径的配置问题
- 【python学习】编码时写路径使用后斜杠导致的unicode error问题解决办法
- Asp.Net连接ACCESS数据库相对路径问题 web.config中如何使用相对路径及在类文件中调用这个相对路径
- CFileDialog改变文件路径导致的一系列问题(如无法安全删除u盘、访问相对路径失败)的解决方法
- Asp.Net 2.0连接ACCESS数据库相对路径问题,web.config中如何使用相对路径
- 使用vue-lazyload解决Vue+Webpack项目的图片加载问题