如何使用SASS從文件中導入字符串？

Question

例如：我想從文件中導入SVG（在CSS中對其進行硬編碼），例如

$svg-icon: @import('./icon.svg'); 

這是不可能的使用SASS？

Answer 1

聽起來就像你想從一個SVG文件創建一個圖標字體。遵循以下步驟：

1. 轉到https://icomoon.io/app/#/select
2. 點擊導入圖標左上方
3. 導航到您要創建從圖標SVG文件。選擇它並點擊打開
4. 您應該在iconmoon網頁上看到您的圖標。點擊它
5. 點擊在右下角生成字體
6. 您應該在新頁面上看到您的圖標。將鼠標懸停在上面
7. 點擊獲取代碼
8. 代碼應該是這個樣子

.icon-home2:before { 
 
    content: "\e900"; 
 
}

8.1複製代碼，並在你的SCSS的頂部粘貼或css文件。

點擊右下方的下載按鈕。

在新的Zip文件夾，去字體文件夾和粘貼EOT，SVG，TTF和WOFF文件複製到某個位置的應用程序中。

寫在您的SCSS文件的頂部下面的代碼（該代碼上述複製先前粘貼）

@font-face { 
 
    font-family: 'newFont'; 
 
    src:url('<location of your eot file>'); 
 
    src:url('<location of your eot file>?#iefix') format('embedded-opentype'), 
 
     url('<location of your woff file>') format('woff'), 
 
     url('<location of your ttf file>') format('truetype'), 
 
     url('<location of your svg file>') format('svg'); 
 
    font-weight: normal; 
 
    font-style: normal; 
 
}

將新樣式分配給您的DOM節點（在這種情況下，類節點爲icon-home2）

你最終的scss（或css）應該看起來像這樣。

@font-face { 
 
    font-family: 'newFont'; 
 
    src:url('<location of your eot file>'); 
 
    src:url('<location of your eot file>?#iefix') format('embedded-opentype'), 
 
     url('<location of your woff file>') format('woff'), 
 
     url('<location of your ttf file>') format('truetype'), 
 
     url('<location of your svg file>') format('svg'); 
 
    font-weight: normal; 
 
    font-style: normal; 
 
} 
 

 
.icon-home2:before { 
 
    content: "\e900"; 
 
    font-family: "newFont"; 
 
    font-size: 20px; 
 
    color: #f47920; 
 
}