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