less文件引入路径问题

在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'

看起来是不是更加简洁而且目录层级也更加清晰了，并且还不容易出错，不用一层一层的向上寻找目录。

如果觉得我的文章对您有用，请您随意打赏。您的支持将鼓励我更加努力创作！

如无特殊声明，文章均为原创，若有不正之处，万望告知。转载请附上原文地址，十分感谢！