In the work, we often write this code:
Import MHEADER from '../../components/m-header/m-header '@Import "../../common/stylus/variable"@import "../../common/stylus/mixin"
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:
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
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.
This method is not wrong, justThe processing of the CSS over WebPack is different from JS.
@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!