Webpack uses resovle in less files

1. Refer to the short path in the less file like the js file.
2, webpack.config.js are as follows

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

3. Import "components/Header.js" references can be used directly in js files, but @ import" common/consts.less"

cannot be used in less.
Mar.21,2021

this is because @ import is parsed by css-loader
the first method @ import'~ @ scss/icon.less'; ,
css is being introduced: @ import https://img.codeshelper.com/upload/img/2021/03/21/qa01r3j5gde11542 @ / style/theme" <: background: url (https://img.codeshelper.com/upload/img/2021/03/21/qa01r3j5gde11542 @ / assets/xxx.jpg" in css attribute)
html tag: alias


/ can be imported into LESS module
require ('. / common/consts.less') through CommonJS specification;
since webpack, is used, it can be directly introduced into the js file. Remember to install the corresponding loader

.
Menu