處理 Webpack 中 SCSS 和 SASS 中的資源相對路徑

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');
}

優點

  • 沒有路徑問題

缺點

  • 不易管理
  • 體積增大
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章