less文件引入路径问题

该文章发布于 ,归类于 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'

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

相关文章