The @import rule does not properly import the requested file

[steve-todorov]

The @import rule in SASS can be used in two ways:

1. As a css import rule resolving in @import: url(url) when compiled.
2. As a rule which actually imports/includes another sass or css file inside the currently compiled on.This particularly useful when your assets are managed by bower and you want to compile and minify everything into a single css file.

Here is a link explaining what I'm talking about. Some important links from there:

1. The logic behind how the @import rule works.
2. The PR when this was implemented.

In the current version of scssphp the @import rule will result in the following compiled css:

@import '../other/subdir/import_me'

instead of actually importing the content of the import_me file.

After digging through the source code of scssphp I found out the solution is quite simple. One should only append $url.'.css' to the Compiler.php#L3218. Afterwards everything should work as expected in both scenarios when using @import.

[robocoder]

Some level of functionality is targeted for ruby scss 4. Meanwhile, the feature currently implemented in libsass has been criticized by the reference implementors.

[evantishuk]

@robocoder can you elaborate? I can confirm this is an issue and that @steve-todorov's fix does indeed work, but I'm not sure why it wouldn't be integrated into the package as-is.

[robocoder]

Ruby sass is the reference implementation, not libsass.

[evantishuk]

Should this be reported to http://sass-compatibility.github.io/ ??

[steve-todorov]

I understand you're trying to follow the ruby implementation as close as possible. I must say, however, this feature is sometimes a serious deal breaker. Imagine you have a project, which manages it's resources using bower. Now in bower you have a few dependencies like select2, jquery, bootstrap and so on. With the current released versions of both ruby-sass and leafo/scssphp the @import rule will only create a import url('....') in the css output (but as pointed in the description, this is working fine if using libsass). This would require all of the bower assets to be made available in a public folder which pretty much makes sass useless. After all, I can write a plain css file and add all other css files to my header instead of writing @import in a scss file which would only do the same in a slightly different way.

I'm really surprised they haven't back-ported this feature to ruby yet. Anyway, I hope you reconsider and make an exception for this feature. It could be a long time until they release the official v4.0 and even then it's not entirely sure if they would have implemented this in the ruby version.

[evantishuk]

I don't know if it's the ideal solution, but for anyone looking for a quick fix, I just override the Compile class in my application and make sure it takes precedence in composer's autoload. Something like:

"autoload": {                                                                 
    "psr-4": {                                                                  
        "Leafo\\ScssPhp\\": "lib/overrides/leafo/scssphp/src/"                      
    }
}            

[svnt]

it's still a 'problem', right?

[steve-todorov]

As far as I'm aware - yes it is. I've switched to webpack & angular since and haven't needed this anymore. If you're using symfony you can try generating a manifest and setting the path in the assets config.

[robocoder]

sass/libsass#2611

Proposal:

• bin/pscss support for --imports extensions (-E)
• src/Compiler.php support for user specified extensions and custom loader hook

Question:

• import as pure CSS or treat as SassScript?

[Cerdic]

I propose to append to the compiler an internal property $importableExtensions = ['scss'] and a method to set it, and use it in the findImport() method.

Then the working is untouched, but you can make the Compiler to import css files, as demanded here (accepting they are parsed as SassScript)

This can go with an option for bin/pscss