使用 sass 新版本导入本地 google 字体时出错

Question

我正在尝试向某些 sass 文件添加新的 google 字体，这些字体是本地字体，我使用 sass 和 url 添加它们以下代码

    @font-face
    font-family: 'Abril Fatface'
    font-style: normal
    font-weight: 400
    src: url('abril-fatface-v9-latin-regular.eot')
    src: local('Abril Fatface'), local('AbrilFatface-Regular'),
        url('abril-fatface-v9-latin-regular.eot?#iefix')
            format('embedded-opentype'),
        /* IE6-IE8 */ url('abril-fatface-v9-latin-regular.woff2')
            format('woff2'),
   url('abril-fatface-v9-latin-regular.woff')
            format('woff'),
 url('abril-fatface-v9-latin-regular.ttf')
            format('truetype'),

            url('abril-fatface-v9-latin-regular.svg#AbrilFatface')
            format('svg')





    Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
    SassError: expected ":".
      ╷
    7 │         url('abril-fatface-v9-latin-regular.eot?#iefix')
      │            ^
      ╵
      src/modules/editor/styles/fonts/abril-fatface-v9-latin/index.sass 7:12  @import
      src/modules/editor/styles/fonts/fonts.sass 1:9                          @import
      src/modules/editor/styles/index.sass 10:9                               root stylesheet

Answer 1

试试这个代码：

@font-face 
    font-family: 'Abril Fatface'
    font-style: normal
    font-weight: 400
    src: url('abril-fatface-v9-latin-regular.woff2') format('woff2'), url('abril-fatface-v9-latin-regular.woff') format('woff')

我删除了不同网址之间的空格（换行符、制表符）。
由于 Sass 是 whitespace-sensitive（与 scss 相比），之前使用的新行似乎中断了对 src 属性.[=11= 的解析]

使用 sass 新版本导入本地 google 字体时出错

error when importing local google fonts with sass new version

css

reactjs

sass

less

scss-mixins