【记录】vue项目中@import 后面的波浪号~ 代表什么意思

在使用vue-element-admin框架的时候，发现原来导入样式也可以这也写！写法挺高级的，就此记录下~

由于是在webstorm中编写的项目，编辑器好像不识别这种写法，所以一直报错。

这种写法其实是webpack中的一个配置。这里用~符号,表示后面的值为 alias, 然后就会去vue.config.js的 alias 配置中找相应的值。

然后拼接成最后的地址：

'src/styles/mixin.scss'
'src/styles/variables.scss'

注意：
我们必须加上 ~符号，否则我们可能会因为找不到而报错。

当然，我们也可以在vue.config.js中添加其它的 alias 配置自定义字符a

   resolve: {
      alias: {
        '@': resolve('src'),
        'a':resolve('src/styles')
      }
    }

然后我们可以在其它组件中进行使用

@import '~a/sidebar.scss'

相当于：

'src/styles/sidebar.scss'

如果您也正在学习前端的路上，记得关注该博主，学习更多关于前端的知识~

博主主页 Poetic Code

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/weixin_44253336/article/details/105210291
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2020-06-28 03:18:01
阅读 ( 798 )
分类：前端

【记录】vue项目中@import 后面的波浪号~ 代表什么意思

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看