Webpack using aliases (Resolve.alias) to resolve problems caused by scss @import relative paths

Resolve.alias Configuration in Webpack.conf.js

Resolve: {         extensions: ['. js ', '. Vue '],         alias: {             ' @ ': path.resolve (__dirname, ' src ') ),             ' @scss ': Path.resolve (__dirname, ' src ', ' scss '),         }}

After configuring the Resolve.alias, we can use this in JS

// originally this write import Hongalert from '. /src/scss/icon.scss '//  can now write import Hongalert from ' @scss/icon.scss '

In Scss need to write this, note is [email protected]

// It was originally written @import '. /.. /.. /scss/mixin.scss '; // now can be written, note is [email protected]@import ' [email protected]/icon.scss ';

Questions and background

In the Style tab in *.vue, I used the @import to introduce the ICON.SCSS style. Because icon needs to rely on a font/woff/ttf. The Icon.scss and font folders are the same directory.

But Alert.vue and they are different directories. So what happens when you compile? Error ~

The reason and the process may be this: Vue will introduce ICON.SCSS, and then want to introduce the font, but found in the Vue directory can not find the font this folder, so error.

The workaround is to configure the absolute path in conjunction with the Webpack Resolve.alias.

Incidentally, if you refer to Scss in JS, it will not cause this error. But in JS to import CSS always feel strange.

Import ' @scss/icon.scss '

Webpack using aliases (Resolve.alias) to resolve problems caused by scss @import relative paths