Question 39442 in Ubuntu Question posted in
The official Ubuntu documentation can be found here.

How can I refactor my scss code from import to use rule? It's not working to me

I’m doing refactor of my CSS files from @import to @use.

_foo.scss

@mixin loadFontFace($fontFamily, $fontName, $fontLocal: '', $fontLocalAlt: '', $fontWeight: 400, $fontStyle: normal, $font-variation: normal) {
  @font-face {
    font-weight: $fontWeight;
    font-family: $fontFamily;
    font-style: $fontStyle;
    unicode-range: 'U+0-1FFFFF';

    @if ($fontLocal != '' and $fontLocalAlt != '') {
      src: local($fontLocal),
      local($fontLocalAlt),
      asset-url('#{$fontName}.woff2') format('woff2-variations'),
      asset-url('#{$fontName}.ttf') format('truetype-variations');
    } @else {
      src: asset-url('#{$fontName}.woff2') format('woff2-variations'),
      asset-url('#{$fontName}.ttf') format('truetype-variations');
    }
  }
}

_main.scss

@use "foo" as *;

@include loadFontFace($fontFamily: 'Ubuntu',$fontName: 'ubuntu-variable',$fontWeight: 1 999,$fontStyle: normal);

I’ve got a message: no mixin named loadFontFace

When I change the namespace from "*" to "as foo", I got a message:
Invalid CSS after "@include foo": expected 1 selector or at-rule, was ".loadFontFace($font"

My sass version is "1.45.2".

Do you know where is the problem, please?

Thank you!

Tags:

2

Answers


  1. 0

    You’ll have to make the link to _foo.scss more specific.

    If _foo.scss is in the same directory, instead write:

    @use "./foo" as *;

    This should link up correctly.

    Login or Signup to reply.
  2. 0

    When I change the namespace from "*" to "as foo", I got a message:
    Invalid CSS after "@include foo": expected 1 selector or at-rule, was
    ".loadFontFace($font"

    If you import a module without the alias, it will namespace it e.g. if your module is called _foo.scss, you can include and use it like that:

    @use 'foo'; // everything inside foo will be namespaced with 'foo'

@include foo.loadFontFace(...) // foo prefix

    When you use an alias, you can rename this ‘foo’ prefix. as * means, that everything inside foo will be included without a namespace prefix.

    @use 'foo' as *; // everything inside foo will be available just like the old @import

@include loadFontFace(...) // no prefix

    Do you know where is the problem, please?

    Your code looks okay. It must be related to the path of the include. Just make sure that you put the correct path for foo -> either an absolute path or a relative path:

    @use 'foo' // foo is in the same folder as main
@use 'mixin/foo' // foo is in the subfolder mixin
@use '../mixin/foo' // foo is in the folder mixin relative to main's parent folder
@use 'src/styles/mixin/foo' // import from absolute path
// ... etc
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search