在vue开发中,我使用less来书写页面样式,但是如果要引入的less文件的目录层级和当前的vue文件的目录层级相距非常远,那么此时一般会这样引入。
@import '../../../assets/less/hello';
看起来特别容易出错,hello.less
的文件位置也不是很直观。那么,可以借助于webpack,让文件的引入更加轻松。
比如我的目录结构是如下样式
--src
--assets
--less
--hello.less
--images
--pages
--....some vue files
--hello
--word
--hello.vue
这时可以配置webpack的alias
配置项。
alias: {
assets: join(__dirname, '../src/assets'),
},
然后less按照如下方式来引入
@import '~assets/less/hello'
看起来是不是更加简洁而且目录层级也更加清晰了,并且还不容易出错,不用一层一层的向上寻找目录。
如果觉得我的文章对您有用,请您随意打赏。您的支持将鼓励我更加努力创作!
如无特殊声明,文章均为原创,若有不正之处,万望告知。转载请附上原文地址,十分感谢!