1 ~
resolve: {
extensions: ['.js', '.vue'],
alias: {
'vue': 'vue/dist/vue.esm.js',
'components': resolve('src/components'),
'common': resolve('src/common'),
'config': resolve('src/config'),
'views': resolve('src/views')
}
}
<style scoped lang="scss">
@import "~common/sass/variables";
@import "~common/sass/mixin";
/* ... */
</style>
~是默认代表当前项目的更目录,需要在alias里面配置个别名
vue在DOM元素里面用别名需要加~
- vue项目中默认定义了@(最常用)和vue$两个别名,如果需要,可以自己添加。
resolve: {
extensions: ['.js', '.vue'],
alias: {
'vue': 'vue/dist/vue.esm.js',
'components': resolve('src/components'),
'common': resolve('src/common'),
'config': resolve('src/config'),
'views': resolve('src/views')
}
}
注意:~@/assets/scss/_variables.scss 给人的感觉就是 src下面的 assets/scss/_variables.scss; 但是如果在这样去引入样式,会报错。(页面引入图片不使用@前不加~也会报错)