Buttons cause "Did not parse stylesheet at '...' because non CSS MIME types are not allowed"

[hambern]

I'm trying to install this for October cms (it has a sass compiler) but i keep getting this error when i add the "base/buttons.scss" -file:

Did not parse stylesheet at 'http://.../combine/47585830fa41731d4b1583720b9c9e98-1474972780' because non CSS MIME types are not allowed in strict mode.

if sure must be the first row that messes it up:

{$all-buttons} {

My styles.scss file looks like this:

@import "bourbon/bourbon";
@import "neat/neat";
@import "base/variables";
@import "base/buttons"; // causes the error
@import "base/forms";
@import "base/layout";
@import "base/lists";
@import "base/media";
@import "base/tables";
@import "base/typography";

This works though

@import "bourbon/bourbon";
@import "neat/neat";
@import "base/variables";
// Buttons removed
@import "base/forms";
@import "base/layout";
@import "base/lists";
@import "base/media";
@import "base/tables";
@import "base/typography";

[hambern]

Bump?

[tysongach]

Hi @Hambern!

Do you know what compiler October CMS is using under the hood?

To use variables as selectors, Sass needs them to be interpolated, which calls for the funny syntax #{$all-buttons}.

As a gut-check, if you swap that selector (#{$all-buttons}) for a regular CSS selector (e.g. .button), does the Sass compile without error?

[hambern]

Can't Try now but to me it seems like the variable '$all-buttons' isn't set. Because the syntax looks okay. Where is the variable set?

[tysongach]

The variable comes from Bourbon.

[hambern]

I'll try som more later tonight. To me it seende like the whole button-part in bourbon was commented out. I'll be back ;)

[tysongach]

Are you talking about this part in the _buttons partial? https://github.com/thoughtbot/bourbon/blob/master/core/bourbon/library/_buttons.scss#L3-L25

If so, those SassDoc comments, which is our documentation system.

The key part of the partial is Line 27 (as well as Lines 46, 65 & 84), which defines the variable and calls our _assign-inputs function, which loops through our list of button elements.

The error you originally posted seems to indicate something other than Sass not properly finding the $all-buttons variable.

[hambern]

Ah, I see. Yes, the variable is set there... Strange.

As a gut-check, if you swap that selector (#{$all-buttons}) for a regular CSS selector (e.g. .button), does the Sass compile without error?

If I swap the first row to ( .buttons { ), everything compiles just fine. Seems like the October CMS's Sass-compiler are having troubles with the #{$all-buttons} selector. Hmmm... I'll look it up...

[hambern]

October seems to be using Leafo ScssPhp (http://leafo.net/scssphp/). It sais "Scss files are mostly compatible, but there are slight differences." Hmmm... Any tips on how to do a workaround? Does .button {} really work? ;)

[tysongach]

Interesting. Yeah, we might have to dig further into scssphp to understand.

Bourbon’s $all-buttons variable is just a quick-path to not having to write-out all of the HTML button elements yourself. So the quickest workaround here is to just replace that selector in Bitters, with the raw list:

- #{$all-buttons} {
+ button,
+ [type="button"],
+ [type="reset"],
+ [type="submit"] {
  …
}

[hambern]

Thanks a lot. Will tell others with the same problem about the workaround :) Thanks again