Can't setup Compass with WebStorm

Question

I'm trying to setup Compass in a pre-existing WebStorm project, however the css files are not linking correctly. I have tired changing the relative links, but have not had any luck.

I generated the folders and config.rb by running compass init. Ideally, I would want these folders moved so they are all under public (ie sass, stylesheets etc)

I am including them in layout.jade with

 link(rel='stylesheet', href='/stylesheets/screen.css'
    media="screen, projection" type="text/css" )

See screenshot:

//Removed because I cant post that many links

I am not getting any errors, the styles just aren't applying to the page.

Edit:

I'm very confused - the css under stylesheets looks correct, but the css under the scss files has the error ' File to import not found or unreadable: compass/reset. on line 6 of screen.scss'. Why are there two css files?:

Edit 3:

The error seems to be here, but I cannot figure out how to fix it?

Well your screen.css is not in your stylesheet map, according to your picture. That's why it isn't working — Robbin van der Jagt
Based on screenshot .. it looks like generated .css file gets saved next to the source file in the same sass folder instead of stylesheets — LazyOne

Unknown Unknown · Accepted Answer · 2016-10-13T18:00:08

I found the issue:

Because of:

app.use(express.static(path.join(__dirname, 'public')));

in app.js, the jade code in layout.jade was compiling from:

layout.jade

href='/stylesheets/screen.css'

into:

index.html

href='/public/stylesheets/screen.css'

Moving the stylesheets etc folders be under public and updating config.rb fixed it.

config.rb:

css_dir = "/public/stylesheets"
sass_dir = "/public/sass"
images_dir = "/public/images"
javascripts_dir = "/public/javascripts"

Can't setup Compass with WebStorm

1 Answers