常常会在vue项目中看到这样的情形:
@import '../../../../assets/css/varibles.scss'
可以简写为以下:
@import '~@/assets/css/varibles.scss'
这里的~符号。表示后面的值为 alias
, 然后就会去 build/webpack.base.conf.js 的 alias
配置中找相应的值, 然后拼接成最后的地址
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
}
当然也可以在 build/webpack.base.conf.js 的 alias
配置自定义字符,比如:scss
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'scss': resolve('src/assets/css'),
}
}
然后使用:
在 main.js 或者其他组件都可以使用
@import '~scss/varibles.scss'