How do I add "Compass" to my Glitch Project?

Glitch Help
, ,
1

I do not really know how to add Compass into my CSS code,
I have tried using the import line:

/* Cascading Style sheet */
@import "compass";
@import "compass/css3";
@import "compass/reset";

What am I doing wrong?
This is the error it keeps throwing:

// JavaScript
Refused to apply style from '<URL>' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

(Url is replaced with https://www.warriorfoox.com/ and then the filename that is being attempted to add.)

2

Mind giving me a project page so i can see the code? and better understand the issue

3
4

looking at source code atm

5

I don’t see a issue from what i know about CSS, but maybe if i had access to logs it will help me understand,

so to summarize what might be confusing to you, so I don’t see a issue with code (btw im not super experienced with CSS, so i could be very wrong) but i think this is a server side issue, so maybe contact Glitch Staff and see if they figure this out

so MIME type is on strict that’s all i know from the error

and i am again making this confusing somehow sry

6

There are tips in here for how to get it working with an express project … compass - npm

Its trying to load compass, compass/css3 and compass/reset. Your express server is responding with 404 and a mime type text/html, because it doesn’t find a matching file to serve.

The css should be compiled first, see the npm module instructions :smiley:

7

I don’t think I fully understand this. I’ve tried this with and without the {cwd: “public”} but it still fails to do anything. Also tried directly pointing to the CSS, and it still fails. What am I doing wrong?
(Before you ask, yes “Compass” is stated, and the Logs on Glitch are not printing anything.)

compass.compile('public/style.css');

app.use(compass({cwd: "public"}));
app.use(express.static("public"));
8

Hi, what features of Compass are you most interested in? The reason I ask is that Compass is Ruby and Glitch supports mainly node.js. You can run Ruby on Glitch but there is not much documentation on it. I’d recommend running it from a task runner like Grunt. Node Compass won’t run without the Ruby Compass installed correctly.

If you’re looking to use SASS (the reason most people use Compass) I’d recommend https://sassy-starter-app.glitch.me/ which uses a Node native version

9

Yes I’m using it for SCSS. It’s just I can’t find helpful docs on how to import it.

10

The https://sassy-starter-app.glitch.me/ will give you the same features and should be easier to use (you can use scss files. https://glitch.com/edit/#!/sassy-starter-app?path=source/_reset.scss:1:0

The devs of compass say “Compass is no longer actively maintained.”

11

Cannot remix, it opens a Glitch window and then shows an alert box with the text of “An error occurred when trying to create this project, please try again later.”

12

Hi @Warriorfoox,

Thank you—you just caught a bug in the starter app!

I’ve fixed it, and confirmed that the remix link is now working. Give it another try, and let us know if you have any questions.