webpack 使用別名(resolve.alias)解決scss @import相對路徑導致的問題
阿新 • • 發佈:2018-02-10
如果 編譯 解決方法 標簽 這樣的 alert 發現 audio isp
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‘
webpack 使用別名(resolve.alias)解決scss @import相對路徑導致的問題