3

In my component's scss file, I am trying to use other scss files. I thus wrote the following as the first statements in my component's scss file (before anything else):

@use './_one.scss';
@use './_two.scss';

However, when I run the dev server, I get a very confusing error:

[ ERROR ]  sass error: src/components/my_component/my_component.scss:1:86
           @use rules must be written before any other rules.

      L1:  @use '_one.scss'; 
      L2:  @use '_two.scss';

Also worth mentioning: _one.scss and _two.scss both use _common.scss and have the following as first statement:

@use './_common.scss'

commenting this out in _one.scss and _two.scss doesn't change anything.

Is this a known incompatibility between sass and stenciljs? I tried to search for answers but to no avail. What am I missing here?

Help appreciated. Thanks!

joe42
  • 31
  • 2
  • This is because it looks like the SASS package for stenciljs uses `ruby-sass` or `node-sass` depending on the version of the package. `@use` isn't supported by those compilers: https://sass-lang.com/documentation/at-rules/use – disinfor Apr 16 '21 at 18:53
  • I fyou check stencilJS documentation it indeed uses Dart Sass (https://www.npmjs.com/package/@stencil/sass >>> https://www.npmjs.com/package/sass). If so ... you may check if there could (should?) be a huddle in you code. What about file `common.scss`: error could be on that ... maybe there is a `@use` inbetween the code after rules had been set. If you may show the code ... it could be easier to help. – Brebber Apr 17 '21 at 06:28

0 Answers0