Webpack 的 sass-loader 是沒有處理資源(比如圖片和字體)的相對路徑的。在項目代碼中這一點也許不是問題,但是對於 node_modules 中的資源文件就不是那麼回事了。
https://webpack.docschina.org/loaders/sass-loader/#resolving-import-at-rules
SCSS 中用@import
引入模塊時,只會單純的引入代碼,不會處理資源(url
)的相對路徑。
比如:
@font-face test {
font-family: test:
url:(./font/test.woff);
}
所以如果從node_modules
引入 SASS 或 SCSS 文件,文件中的相對路徑仍然是相對於包在node_modules
中的路徑,從而引發 Webpack 找不到模塊的錯誤。
對此,有幾種方法可以解決這個問題:
resolve-url-loader
使用 Webpack 的加載器,放在 sass-loader 之前。
方法
示例:
[
{
loader: 'resolve-url-loader',
options: {
sourceMap: true
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
}
]
注意:sass-loader必須輸出sourcemap。
優點
- SASS包不需要特殊處理,直接使用相對路徑。
缺點
- 項目需要配置Webpack。
SCSS變量
在SCSS代碼中設置一個默認變量,默認爲.
。在項目中重寫這個變量,根據引用位置在設定實際的相對路徑。
方法
比如在node_modules中有這樣一個文件 test/index.scss:
$root: '.' !default;
@font-face test {
font-family: test:
url:(#{$root}/font/test.woff);
}
如果在 src/style.scss 引入了這個文件,那麼需要修改$root
。比如:
$root: '../node_modules/test';
@import 'test'
這樣$root
變量被覆蓋爲相對於引入位置的路徑,資源也能被正確查找到。
優點
- 可以適用於各種打包工具,比如 Webpack 和 Rollup。
缺點
- 包代碼與業務代碼耦合。
- 每引用一次都要重新設定路徑
base64
既然路徑有問題,那可以乾脆不要路徑了,使用內聯的數據。
比如:
@font-face {
font-family: din;
src: url('data:font/woff;charset=utf-8;base64,...') format('woff');
}
優點
- 沒有路徑問題
缺點
- 不易管理
- 體積增大