如何使用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. 代码看起来应该是这样的
＆＃13;
＆＃13;
.icon-home2:before {
    content: "\e900";
}
＆＃13;
＆＃13;
＆＃13;

8.1复制代码并将其粘贴到scss或css文件的顶部。

1. 点击右下角的下载按钮。

2. 在新的zip文件夹中，转到 fonts 文件夹，然后将eot，svg，ttf和woff文件粘贴到应用程序中的某个位置。

3. 将以下代码写在SCSS文件的顶部（在您之前复制粘贴的代码上方）

＆＃13;
＆＃13;
@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;
}
＆＃13;
＆＃13;
＆＃13;

1. 将新样式分配给dom节点（在本例中为类 icon-home2 的节点）

2. 你最后的scss（或css）看起来应该是这样的。

＆＃13;
＆＃13;
@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;
}
＆＃13;
＆＃13;
＆＃13;