Sass new version causing error when importing local Google fonts

Currently, I am in the process of incorporating new Google fonts into various Sass files. These particular fonts are locally stored, and I'm including them using Sass along with URLs with the code snippet below:

    @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
cssreactjssasslessscss-mixins

Answer №1

Give this code a try:

@font-face 
    font-family: 'Montserrat'
    font-style: normal
    font-weight: 300
    src: url('montserrat-regular.woff') format('woff'), url('montserrat-regular.woff2') format('woff2')

I eliminated any spaces (new lines, tabs) between the different URLs.
Because CSS interprets whitespace differently, especially when dealing with fonts, removing unnecessary spaces can improve parsing.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Troubleshooting compatibility problems between jQuery UI Sortable and a responsive Bootstrap 5 page

Has anyone had experience using the jQuery UI Sortable widget on a Bootstrap 5 responsive page? My page consists of <div class="col-lg-6"> elements, displaying two per row. Although the sorting functionality works, I've encountered t ...

csstwitter-bootstrapjquery-uibootstrap-5jquery-ui-sortable

What is the method for creating a draggable React-Material-UI Popper?

I am looking to dynamically adjust the position of a Popper on the screen using react-draggable. Below is the code I have attempted: import PopupState, {bindPopper, bindToggle} from "material-ui-popup-state"; ... return ( ...

reactjsmaterial-uidraggablereact-typescriptpopper.js

Position an element in the middle of the range between the tallest and shortest characters

Is there a way to vertically center an element between the tallest and shortest characters of another element (preferably using just CSS, but JavaScript is also acceptable)? I want it to be aligned with the actual text content rather than the line height, ...

javascripthtmlcsslayout

Tips for creating sliding header content alongside the header

Is it possible for the content in the header to scroll up, displaying only the navigation list and hiding the logo when a user scrolls on the website? Currently, while the header background slides up, the content within the header remains in place. I feel ...

jqueryhtmlcssscrollnav

Error in Typescript: The property 'children' is not included in the type but is necessary in the 'CommonProps' type definition

Encountering this error for the first time, so please bear with me. While working on a project, I opened a file to make a change. However, instead of actually making any changes, I simply formatted the file using Prettier. Immediately after formatting, t ...

javascriptreactjstypescript

CSS techniques for positioning a header image

I'm having an issue with using a banner I created in CS6 Illustrator as a header on my website. Despite setting it as the background, positioned at the top and set to "no-repeat", it keeps appearing at the bottom of the header area with around 300px o ...

htmlcssadobe-illustrator

Tips for fixing label overlap problem in React Material UI autocomplete component

I recently started working with React Material UI and I am looking to implement a floating label for the auto complete component. However, once a value is selected from the auto complete options, I want the label to stay at the top. For further clarifica ...

reactjsmaterial-ui

Having trouble getting wire:click to work within an if statement in Laravel Livewire

I am currently in the process of creating a popover feature for my website that should open when I click on a phone number. Upon clicking on the phone number, it triggers a function called "startCall" in my Livewire component which sets the value of $calli ...

phphtmlcsslaravel-livewirelaravel-livewire-wireclick

Installation has been terminated. The process of installing react, react-dom, react-scripts, and cra-template using yarnpkg add --exact command in the directory /home/ficho/workspace/story

Struggling to set up a new react app, Everything was running smoothly until today when I had to install yarn. Ever since, I keep encountering this error every time I attempt to create a new react app: ➜ workspace npx create-react-app storybook-tutorial ...

node.jsreactjsyarnpkgnpx

Tips for importing and exporting icons in a way that allows for dynamic importing using a string parameter

I am facing an issue with dynamically importing SVG icons in React Native. Initially, I tried using the following code snippet: const icon = require(`@src/assets/icons/${iconName}`) However, after realizing that this approach wouldn't work for me, I ...

javascriptreactjsreact-native

What is the best way to perfectly center a div both vertically and horizontally?

Despite being new to CSS, I've experimented with various approaches but am struggling to center my div vertically. Parent : #ModalScroll{ position:absolute; top:0; left:0; z-index:1001; height:1px; width:1px; overflow:hi ...

jqueryhtmlcssinternet-explorercentering

"Streamlining the development process with Redux Toolkit, RTK, and Mul

How can I upload an image using RTK and Multer? JSX file const onSubmit = (e) => { e.preventDefault(); const payload = new FormData(); payload.append("imagegif", image); payload.append("title", formData ...

node.jsreactjsreduxmulterredux-toolkit

What are the steps for utilizing the Object.entries(...) method along with .forEach and .every

Using a constant queryModifier = {price: "lessThan", weight: "greaterThan"}, I am filtering a list. const queryKeys = keys: { price: '1000', weight: '1000' } const list = [ { // object data here }, { // o ...

javascriptnode.jsreactjs

What is the method for displaying Facebook comments alongside the WordPress comments count?

I am currently using a template theme that initially had WordPress comments enabled on the website. By implementing the Facebook Comments plugin, I have successfully replaced Wordpress comments with Facebook Comments. **However, there seems to be an issue ...

phpjquerycsswordpressfacebook

Switching out one block of HTML with another in JavaScript is a powerful way to dynamically update

I am working on creating a feature on a webpage where clicking a button will change the HTML code inside a specific div. Essentially, I want to be able to update the content of a div by simply clicking a link. Here are two different sets of HTML code: Co ...

javascripthtmlcss

Using Bootstrap classes within a specified class declaration

Can you nest style classes within a single class? For example: .my-upper-class{ .hidden-md, .hidden-sm, .hidden-lg} ...

css

Using Material UI styles with passed props

Looking at the Card code from this link, I am trying to update the card style or any material UI style like this: const styles = theme => ({ card: { minWidth: 275, }, To something like this: const styles = theme => ({ card: { minWidth: 275, ...

reactjsmaterial-ui

Navigating through Next.js pages feels like dragging through molasses, especially when using server

It's clear that this question has been asked before, but the existing answers are not solving my issue. The problem I'm facing is that server-side rendering is taking too long. Moving from page to page is slow, ranging from 2.5-4 seconds and som ...

reactjsperformanceoptimizationnext.jsserver-side-rendering

Opacity transition in CSS does not function properly on a sibling selector when hovering over an element

I have created a responsive menu where the list items after the 4th element are set to display:none; opacity:0 on mobile devices. The 4th element is an icon and when you hover over it, the hidden menu items appear as a block list below using li:nth-child( ...

csscss-selectorscss-transitionsopacitysiblings

Creating a Kendo Menu within an Ext JS Panel

Currently, I am experimenting with combining ExtJS and Kendo UI - a unique mix that is taking me off the usual path ;) I have managed to render a Kendo Menu onto an Ext JS (4.2.1) generated Ext.form.Panel In case you want to check it out, here's a F ...

javascriptjquerycsskendo-uiextjs4.2