关于 @import "~assets/scss/mixins";

请问老师：

我目前知道“～”这个意思是可不可被识别到，但我不清楚地方是是不是之后所有的vue 文件要引入 scss 文件都需要加 "~" ? ( @import "~assets/scss/xxxx" )

请老师解惑，谢谢您。

源自：实战：Vue webAPP首页开发 1-1 页面结构和样式

收起

1回答

卡布琦诺回答被采纳获得+3积分 2019-08-10 14:55:16

常常会在vue项目中看到这样的情形：

@import '../../../../assets/css/varibles.scss'

可以简写为以下：

@import '~assets/css/varibles.scss'

这里的~符号。表示后面的值为 alias, 然后就会去 build/webpack.base.conf.js 的 alias 配置中找相应的值, 然后拼接成最后的地址

实际上就是我们在webpack.base.conf.js里面配置了如下代码

resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'scss': resolve('src/assets/css'),
}
}

然后就可以使用这种简写方式了

@import '~assets/css/varibles.scss'

配置完webpack.base.conf.js上面的代码段，以后引入都是需要写~的

希望可以帮到你！

慕小庄提问者 #1

请问老师：按照老师的解释，因为我们在webpack.base.conf.js里面配置了 alias: { 'assets': resolve('src/assets'), } assets的路径简写代码，所以我们才可以使用 " ~ " 这个符号，这样理解对吗？

2019-08-11 12:25:20
好帮手慕慕子回复提问者慕小庄 #2

同学你好，你这样理解是可以的哦，祝学习愉快~~~

2019-08-11 16:45:06