CSS is not generated from the SCSS

[csaeum]

Hi, I have a quick question about your chasegiunta / scss Plugin for Craft CMS

I have successfully installed and activated it.
Dependencies like leafo / scssphp are also installed.

I use UIKIT https://getuikit.com and I integrated everything after the documentary. In my opinion, it should fit.

In the I have included the files:
{% scss%}
{# 1. variables #}
$ global-link-color: # DA7D02;
{# 2. Load Standards #}
@import "{{siteUrl}} assets / scss / variables-theme.scss";
@import "{{siteUrl}} assets / scss / mixins-theme.scss";
{# 3. Rework #}
@mixin hook-card () {color: # 235689; }
{# 4. rest rest #}
@import "{{siteUrl}} assets / scss / uikit-theme.scss";
{% endscss%}

But under http://gregor-eisbahn.web-seo-consulting.eu/ the TAGS can be seen but are not completed in CSS but the actual SCSS are integrated.

What am I doing wrong?
Thanks for yout help

Greetings
Christian Säum

[chasegiunta]

@csaeum Hard to say without loading up a test case, but I think the first step in troubleshooting would be to not use {{siteUrl}} in your import paths, and instead import relative to your base Craft install path as specified here https://github.com/chasegiunta/scss#import

[csaeum]

Ok I moved the SCSS of UIKIT into the Templates folder and imported them by relative path:
{% scss %} {# 1. Variablen #} $global-link-color: #DA7D02; {# 2. Standards laden #} @import "../_includes/assets/scss/variables-theme.scss"; @import "../_includes/assets/scss/mixins-theme.scss"; {# 3. Nacharbeiten #} @mixin hook-card() { color: #235689; } @mixin hook-card() { background-color: $global-link-color; } {# 4. rest nachladen #} @import "../_includes/assets/scss/uikit-theme.scss"; {% endscss %}
Do I understand something wrong. Can you post an example or how can I tell that he is parsing it or not?
But I just see that he also does not spend the variables I specify in the SCSS but only outputs the IMPORTS

Here my Folders

[chasegiunta]

If you're putting your scss imports in your templates folder, your @imports would look like this:

@import "templates/seelenleben-2019/_includes/assets/scss/variables-theme.scss"

Stemming from the base of your Craft install.

Is this example code working as expected?

{% scss %}
/*! Comment */
.navigation {
    ul {
        line-height: 20px;
        color: blue;
        a {
            color: red;
        }
    }
}
{% endscss %}

[csaeum]

The First generated this Output:

  	<style>@import "templates/seelenleben-2019/_includes/asssets/scss/variables-theme.scss";

The Second generated this Output:

<style>/*! Comment */

.navigation ul {
line-height: 20px;
color: blue;
}
.navigation ul a {
color: red;
}
</style>

Thanks for yout Help

I tested this with PHP 7.0.33 and PHP 7.2.13

[chasegiunta]

@csaeum there was a typo in assets that I corrected in my comment. Correct it on your end

[csaeum]

Ok thanks

it works now, thanks for your help. Will the generated files be cached for some time in a future release?

So that it does not have to be generated for every page view?

[chasegiunta]

You can wrap your {% scss %} tags in in Craft's native {% cache %} tags and set the cache duration to whatever you'd like.

I don't have plans currently to implement file caching.