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'

 二、圖片路徑也可使用此方法

 .hideicon {
       background-image: url("~@assets/arrow.png");
 }

三、若是你使用vue-cli搭建的腳手架，要注意相對路勁的問題（weboack.config.js是放在build文件夾中的，因此須要先往上一級）

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

 resolve: {
    extensions: ['.js', '.vue', '.json', '.scss'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      '@components': resolve('src/components'),
      '@myComponents': resolve('src/myComponents'),
      '@sass': resolve('src/sass'),
      '@assets': resolve('src/assets')
    }
 },

 四、template中的資源文件也能夠這樣作

<img src="~@assets/BusinessInfo_2.png" class="img1">