webpack在less的文件中使用resovle

Question

1、在less文件中像js文件一样，引用短路径。
2、webpack.config.js如下

  resolve: {
    extensions: ['.js','.json'],
    alias:{
      src:path.resolve(__dirname,'src'),
      components:'src/components',
      routes:'src/routes',
      common:'src/common'
    }
  },

3、js文件中可以直接使用import 'components/Header.js'引用，但是less中无法使用@import 'common/consts.less'

Answer 1

这个因为@import是由css-loader来解析的
第一种方法@import ‘~@scss/icon.less‘;，
css 引入 中： @import "~@/style/theme"
css 属性中： background: url("~@/assets/xxx.jpg")
html 标签中： <img src="~@/assets/xxx.jpg" alt="alias">

Answer 2

//可通过CommonJS规范导入LESS模块
require('./common/consts.less');
既然使用了webpack,那就直接在js文件中引入就可以了，记得安装对应的loader