.ccs.scss stylesheets not importable

[AlexB52]

Expected behavior and actual behavior

Importing a file with the extension .css.scss does not work. Same goes with .css.scss.erb, .scss.erb and .css.erb

However .scss alone works just fine. Any combination of .js.coffee.erb extensions works just fine for javascripts

Some could argue that this is not needed and I do not have any use for css.scss.erb.

I thought this issue was part of a bigger one where I tried to access config variables in my javascripts. However that code solved it.

# config.rb
activate :sprockets do |c|
  c.expose_middleman_helpers = true
end

Steps to reproduce the problem (from a clean middleman installation) or example repo

middleman init test
cd test
echo "gem 'middleman-sprockets'" >> Gemfile
bundle
echo "activate :sprockets" >> config.rb
touch source/stylesheets/_test.css.scss
echo "@import 'test';" >> source/stylesheets/site.css.scss
middleman

Additional information

• Ruby version: 2.4.0
• Middleman version: 4.2.1
• Middleman Sprockets version: 4.1.0
• OS version: macOS Sierra 10.12.3

[stevenosloan]

Hey @AlexB52, sorry for missing this for so long -- must have overlooked the notification at some point 😁

I think this issue come from as far down as the Sass filesystem importer from Sass here, which at least at one point sass-rails was patching to support the full extensions (but was subsequently dropped here). Unfortunately this seems like one of those silent caveats, and I feel like the rails team had a reason for dropping that support (haven't taken the time to dig into it).

It should be possible if you wanted to register your own importer, but I don't think that's something I'd be interested in maintaining in middleman-sprockets. If you do go that route let me know if there's any interface that needs to be opened up to allow setting it :)

[cseelus]

Hm, how should one use .scss or .sass files then? Using just styles.sass for example will output a styles file without .css extension, which won't get included in modern browsers (Did not parse stylesheet at 'http://localhos/assets/stylesheets/styles' because non CSS MIME types are not allowed in strict mode.).

[stevenosloan]

Been a long time since I've looked at this, but I believe that this is the case

extension	compiles to .css	is importable
.scss	❌	✅
.sass	❌	✅
.css.scss	✅	❌
.css.sass	✅	❌

So if you want to output the file, use .css.sass or .css.scss. If it needs to be importable use .sass or .scss.

If you need both, it's a little convoluted, but two files would have about the same result imports/_file.scss & file.css.scss (which contains @import "imports/file";) I haven't actually tested that in code so may need a little bit of an adjustment.

Hopefully that answers your question 🤞

[cseelus]

Thanks for the quick and extensive answer.

The problem is, that I followed the advice middleman-sprocket prints to the command line on startup:

Sprockets will render css with ruby sass
   consider using Sprockets 4.x to render with SassC

So after adding Sprockets 4.0 to the bundle, .css.sass files are not processed anymore and imported as is. Using just the .sass file-extension they are processed, but generated without .css extension.

[AlexB52]

I can confirm that is how I ending up doing too:

• A main stylesheet site.css.scss that imports everything
• The other files imported are partials like _partial_name.scss

[tdreyno]

Hmm, we just upgraded the main project to SassC. I wonder if that and sprockets may now be at odds.

[SnijderC]

Kind of just came to say me too.. Like @tdreyno and @cseelus, I installed sprockets 4 and sassc.

When you look at the sitemap, you will find a style where you expected a style.css file.

[tdreyno]

@SnijderC Go ahead and roll back your middleman version to 4.2.x

[stevenosloan]

@tdreyno this appears to be unsupported in non-sprockets 4.x as well, I *think* this worked in previous versions because of the inclusion of the https://github.com/petebrowne/sprockets-sass gem. I put together some examples stepping from 4.3.2 back through major versions to 3.4.1, but only saved the 3.5.1, 4.2.1, & 4.3.2 outputs https://github.com/stevenosloan/middleman-import-tests

Importing a .css.scss or .css.sass file isn't supported by Sass natively, per their docs Sass will try to find a file with that name and the .scss or .sass extension and import it., and as noted earlier sass-rails specifically dropped support for this, so I wonder if it is worthwhile for middleman-sprockets to continue supporting it as well? (IMO no)

[tdreyno]

Oh, this is just importing? I misread. I think we should support the normal _partial.scss form, but don't need the .css.scss version.

[SnijderC]

Importing a .css.scss or .css.sass file isn't supported by Sass natively, per their docs Sass will try to find a file with that name and the .scss or .sass extension and import it., and as noted earlier sass-rails specifically dropped support for this, so I wonder if it is worthwhile for middleman-sprockets to continue supporting it as well? (IMO no)

Oh, this is just importing? I misread. I think we should support the normal _partial.scss form, but don't need the .css.scss version.

As a user of Middleman, I don't mind either way, though as it stands today, it appears to me the consistent pattern is to put the target extension followed by the file extension in Middleman. I would say it makes sense that it's either that all across the board: .css.scss, .html.erb, .html.slim, .js.coffee etc. or non of it: .scss, .erb, .slim, .coffee. I always assumed they were there though because that way you can also use ERB in .js.erb. files, which would otherwise become a .html file.

My workaround:

_all.scss contains all @import "partial";'s and a style.css contains: //= require "all". Note that _all.scss requires the _ prefix, otherwise a all file will appear (without extension).

Also dug into middleman-sprockets a bit and found that ::Sass::SyntaxError contains a method to convert errors into valid CSS(?). Whereas ::SassC::SyntaxError does not. Which meant I had to manually import Ruby Sass in config.rb just to generate the errors.

[tdreyno]

The "output" extension, the css in .css.scss is only required when wanting to output a file. Imports are usually modules, so they don't need/want it, only the template engine extension scss.

I had to copy that same Error handler from Ruby Sass to Middleman to support SassC as well. Seems like that may be necessary over here too.

[michaelfeihstel]

Is this issue still ongoing? I just upgrade middleman from 4.2.1 to 4.3.4 and middleman-sprockets from 3.x to 4.1.1 and sass imports don't seem to be recognized any longer. I use a single all.css.scss file which only contains imports, as in

   @import "_layout";
   @import "_typography";
   @import "_components";
   @import "_forms";

Those partials are named "_layout.scss", "_typography.scss" etc. but aren't processed at all since the upgrade. Should I roll back to older versions for the time being or did I miss some required adjustments during upgrading?

[tdreyno]

@michaelfeihstel if you don’t need sprockets from JS modules, you can skip this old extension. Sass alone (which is supported directly in MM core) should handle your case above.

[michaelfeihstel]

Yes, I already noticed in another discussion that it's time to let go of sprockets. Sorry for bringing up this old and after all rather unrelated issue.

[betesh]

I fixed this with the following change to config.rb:

-activate :sprockets
+activate :sprockets do |sprockets|
+  sprockets.supported_output_extensions = ['.js']
+end

[robsonsobral]

I fixed this with the following change to config.rb:

-activate :sprockets
+activate :sprockets do |sprockets|
+  sprockets.supported_output_extensions = ['.js']
+end

Thank you, @betesh . However, I don't understand the reason it worked.