Encountered SASS issue: Unable to import Compass

For several months now, I have been smoothly using sass and compass on this computer without any problems.

Consistently, my config.rb and sass directories have always been organized in the same way, across all of my projects.

However, recently I encountered an issue while building the sass code in Sublime. The error message that popped up was: 

Sass::SyntaxError: File to import not found or unreadable: compass.

The initial line in my .scss file includes @import "compass";, leading me to see this error in Terminal: 

error sass/style.scss (Line 36 of _vertical_rhythm.scss: Incompatible units: 'px' and 'em'.)

I have been scouring through various resources for days, coming across some solutions related to the vertical-rhythm conflict, but nothing quite matches my exact problem. As a result, a solution has continued to elude me.

Currently, my compass version stands at 0.12.5 (Alnilam) and my sass version is 3.3.4 (Maptastic Maple).

Interestingly, when working in the office, everything compiles successfully with the identical files from the same GitHub repository. I plan to verify the versions of compass and sass being used at work tomorrow; however, until then, I remain puzzled by this perplexing issue.

Any suggestions or similar experiences from others? Has anyone else encountered a similar situation?

csssasscompass-sass

Answer №1

After a month of trying to fix the issue, I stumbled upon a surprisingly simple solution.

I decided to remove all existing versions of Sass and Compass, then proceeded to install the latest version of Compass which automatically installed Sass as well.

By executing commands like sudo gem uninstall compass and sudo gem uninstall sass, followed by sudo gem install compass, I successfully resolved the problem on my Mac with the necessary permissions.

Problem solved!

Answer №2

For Mac users:

To resolve the issue, navigate to:

/var/folders/p_/w19t0k956zz_bg0bgs0cn6200000gn/T/liferay

Once there, remove the following folders:

document_preview, document_thumbnail, and ruby

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

What steps can I take to prevent the div from exiting the screen during animations?

Hello, I am a novice in the field of web development and I am attempting to create a website where, upon loading it, a text with a typing animation will appear centered in the middle. Eventually, the remaining words in the div will be 'Nice Paws' ...

javascriptcss

Mobile Swipeable Inline Buttons

I have created an inline list of buttons in a banner that extends off the screen. I am looking to implement a swipe feature so users can easily navigate through the buttons that are not visible on the screen. <style> .banner-test { // ...

javascriptjqueryhtmlcssjquery-mobile

The absence of a div tag is leading to issues that need to

I am facing a challenge.. I ran divcounter.jhousemedia.com and it detected two missing div tags. The baffling part is that both of these posts are identical, so I am unsure why this discrepancy exists.. One post without the issue: Another post with 2 mis ...

csshtml

The jquery autocomplete feature is failing to function properly when applied to input boxes that are

Currently, I am experimenting with adding jQuery autocomplete functionality to all input boxes on a web page. Initially, there are only two input boxes, but users can dynamically add more. The autocomplete feature works fine in the first two boxes but fail ...

javascriptjqueryhtmlcssgoogle-maps-api-3

Media queries are behaving incorrectly, causing them to trigger when regular CSS should be applied, and vice versa

When I switch to laptop/desktop view, the regular CSS styles are being overridden in the inspect element, and the query styles are taking precedence. Can anyone explain why this is happening? For instance, let's take a look at the code for the nav se ...

htmlcssbootstrap-4media-queries

The problem of "net::ERR_ABORTED" in the console is causing FontAwesome icons to fail to load

I've been attempting to import FontAwesome with SASS by using the following line: @import "../node_modules/font-awesome/scss/font-awesome"; However, I keep encountering these errors in the console and the FA icons fail to load: olympos.min.js?ver ...

npmfontssassgulpfont-awesome

Struggling to center a column without affecting the alignment of other elements within the parent row

Seeking help on how to center the first column (a photo) in a row without centering the second column and its content. This is for a responsive layout on small devices, but applying the text-center class to the parent row centers all content. Here is the l ...

htmlcssbootstrap-4

Tips for dynamically resizing hover text descriptions in WordPress to accommodate varying lengths of text

Hey there, I've been struggling with making the text fit inside the hover effect of my image box in a WordPress post. Any suggestions on how to resolve this issue? I have provided a link to a screenshot where the problem is visible. Please take a look ...

jquerycsswordpresstwitter-bootstraptwitter-bootstrap-3

Unlocking the potential of resizable bootstrap table columns in React

Currently utilizing a bootstrap table <div class="table-responsive"> <table class="table table-bordered"> <thead> <tr> <th>#</th> <th>Table heading</th> </tr> < ...

javascripthtmlcssreactjstwitter-bootstrap-3

Optimal selection of selectors for every type of button in an HTML document

In my current setup, I am utilizing the following selectors: input[type="button"], input[type="submit"], input[type="reset"], button Do you think this is a comprehensive selection of selectors to cover all potential buttons on a website? ...

cssselector

What is causing the Chrome Dev Tools to malfunction when using these CSS pseudo selectors?

Upon closer inspection, I realized that the issue with Chrome Dev Tools not live editing CSS was caused by the following lines of code: @media (max-width: 767px) { .projects-* .v-center.row { display: block; width: auto; } .projects-* .v-cent ...

cssgoogle-chrome-devtools

Animate the background color using Element.animate() method

Experimenting with using Element.animate() to adjust the background-color in order to replicate a refresh effect. Snippet of Code: const changeColorOnPage = (id) => { document.getElementById(id).animate( [ {"background-colo ...

javascripthtmlcsscss-animations

Is there a way to hide an HTML element from view while still allowing it to be found by the browser?

Scenario: A collection of cards with hidden names, but still necessary to search by name Picture album cards without any album names visible, only the images, yet still searchable using Ctrl+F Is there a particular feature or CSS code that would enabl ...

htmlcssbrowser

Update the menu-link class to active for a single-page website

Currently, I have a one-page website that serves as a portfolio. The website features a menu at the top with links that direct visitors to specific sections of the page using # as links. I am looking to enhance the user experience by implementing a functi ...

jqueryhtmlcss

Is my Bootstrap malfunctioning? The grid system seems to be malfunctioning

My very first question here is quite simple. I have a script that creates rows with dynamic content by appending 4 boxes (columns) in one row and then appending the row to the container. After completing this process, it appends the container to the main c ...

javascriptcsstwitter-bootstrap

applying background image depending on html attribute when page loads

Currently, I am working on creating a div structure to add video content to my website. The setup involves using the vidurl for the video URL and srcpost for the background image and poster image when the video is selected. I have encountered an issue whe ...

javascriptjqueryhtmlcss

Tips for centrally zooming responsive images without altering their dimensions

I have created a custom jQuery and CSS function that allows an image to zoom in and out on mouseover while maintaining a constant box size. I modified an example code to suit my needs. Check out the demo here: https://jsfiddle.net/2fken8Lg/1/ Here is the ...

javascriptjqueryhtmlcssimage

HTML - Navbar and Sidebar Only Partially Spanning the Width

Hey there! I am trying to make my sidebar and navbar full width, but for some reason, they are not extending all the way. Can anyone help me figure out why? Below is the code I'm using: I have included an image to illustrate the issue: https://i.sst ...

htmlcsslaravel-5bootstrap-4

What steps should I take to ensure that elements beneath a div are made visible?

I've been working on a unique project to create a website with "hidden text" elements. One of the cool features I've developed is a circular div that follows my mouse cursor and flips all text below it using background-filter in both CSS and Jav ...

javascripthtmljquerycss

Error: The regular expression flags provided are invalid for the Partial View

I am currently facing an issue with a div in my View that uploads a PartialView. Below is the code snippet: <div id="right2" style="border-style: solid; border-color: #1d69b4; border-radius: 10px;"> @Html.Partial("CalendarDefault") </div ...

javascriptjqueryhtmlcss