webpack 使用別名（resolve.alias）解決scss @import相對路徑導致的問題

webpack.conf.js 中 resolve.alias 配置

resolve: {
         extensions: [‘.js‘, ‘.vue‘],
         alias: {
             ‘@‘: path.resolve(__dirname, ‘src‘),
             ‘@scss‘: path.resolve(__dirname, ‘src‘, ‘scss‘),
         }
}

 

配置了resolve.alias 后，在js中我們可以這樣用

// 原本這樣寫
import hongAlert from ‘./../src/scss/icon.scss‘

// 現在可以這樣寫
import hongAlert from ‘@scss/icon.scss‘

在scss中需要這樣寫，注意是~@

// 原本這樣寫
@import ‘./../../../scss/mixin.scss‘;

// 現在可以這樣寫，注意是~@
@import ‘~@scss/icon.scss‘;

 

問題與背景

在 *.vue 中的 style 標簽中，我使用 @import 引入 icon.scss 樣式。由於icon需要依賴一個font/woff/ttf。而 icon.scss 和 font 文件夾是同一目錄的。

而Alert.vue卻和它們不同目錄。那這時候編譯會發生什么呢？報錯~

 原因和流程可能是這樣的：vue將icon.scss引入后，再想引入font的時候，卻發現在vue的目錄中找不到font這個文件夾，所以報錯了。

 解決方法，是結合webpack的resolve.alias來配置絕對路徑。

 

---

 

 

順便一提，如果你在js中引用scss，就不會導致這種錯誤。但在js中導入css總覺得怪怪的。

import ‘@scss/icon.scss‘