Method for using WebPack alias in VUE

In the work, we often write this code:

 Import MHEADER from '../../components/m-header/m-header '@Import "../../common/stylus/variable"@import "../../common/stylus/mixin"
, need to introduce Public files, but the current files in the file path of public documents are far, then the path in the examples in the examples are long.

But because the file directory is the conventional, it cannot be changed easily, and the relative path cannot be modified. Then what should be done?

Everyone knows that the JS in Vue can avoid a long string of path references by configuring the WebPack alias (alias), namely:

// TargetImport MHEADER from ‘Components / M-header / m-header’ // WebPack.Base.conf.jsalias: {‘@’: resolve (‘src’), ‘Common’: resolve (‘src / common “,’ Components: Resolve (‘src / components)}
   However, if this method is used directly in the CSS, the error will be reported: 

@Import “common / stylus / variable” // error @ Import “common / stylus / mixin” // error

  This method is not wrong, justThe processing of the CSS over WebPack is different from JS.  
In JS, the WebPack is processed when the path is processed, and the first folder name without the path identification (/,. /, .. /) is automatically processed as a WebPack alias. For example, the first folder is called Components, then WebPack will automatically search for no corresponding alias in Alias. If so, replace the path directly; no error is reported.
In CSS, the webpack is not processed. If you want WebPack to process the path, then you can identify ~, as follows:

@Import “~ common / stylus / variable” @Import “~ CommON / stylus / mixin “

 Faced with the addition ~ indicates that COMMON is a WebPack alias rather than represents a folder name.   Correct use of WebAPCK alias can greatly reduce the time of introducing files. 

The above is a method of using the webpack alias in the VUE introduced by Xiaobian. I hope that everyone can help, if everyone has any If you have questions, please leave a message, the small package will reply to everyone in time. Thank you very much for your support of Tumi Cloud Website!

© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment