load-partial-extension

Require or disallow extension in @import, @use, @forward, and meta.load-css commands.

@use "file.scss";
/**       ↑
 * This extension */

@use "sass:meta";

body {
  @include meta.load-css("fff.scss",
                  /**         ↑
                  * This extension */
      $with: ("border-contrast": true));
}

The fix option can automatically fix all of the problems reported by this rule only when "never" is given.

The rule ignores cases when Sass considers an @import command just a plain CSS import:

• If the file’s extension is .css.
• If the filename begins with http:// (or any other protocol).
• If the filename is a url().
• If the @import has any media queries.

Options

string: "always"|"never"

"always"

The following patterns are considered warnings:

@import "foo";

@use "path/fff";

@forward "path/fff";

@use "path\\fff";

@use "df/fff", "1.SCSS";

The following patterns are not considered warnings:

@use "fff.scss";

@forward "path/fff.scss";

@import url("path/_file.css"); /* has url(), so doesn't count as a partial @import */

@use "file.css"; /* Has ".css" extension, so doesn't count as a partial @import */

/* Both are URIs, so don't count as partial @imports */
@use "http://_file.scss";
@use "//_file.scss";

@import "file.scss" screen; /* Has a media query, so doesn't count as a partial @import */

"never"

The following patterns are considered warnings:

@import "foo.scss";

@use "path/fff.less";

@forward "path/fff.scss";

@use "path\\fff.ruthless";

@use "df/fff", "1.SCSS";

@use "sass:meta";

body {
  @include meta.load-css("foo.scss", 
    $with: ("border-contrast": true));
}

The following patterns are not considered warnings:

@use "foo";

@use "path/fff";

@import url("path/_file.css"); /* has url(), so doesn't count as a partial @import */

@use "file.css"; /* Has ".css" extension, so doesn't count as a partial @import */

@forward "path/fff";

/* Both are URIs, so don't count as partial @imports */
@import "http://_file.scss";
@import "//_file.scss";

@import "file.scss" screen; /* Has a media query, so doesn't count as a partial @import */

@use "sass:meta";

body {
  @include meta.load-css("path/foo", 
    $with: ("border-contrast": true));
}