Sass @Use Not Loading Partial

Sass @use not loading partial

That's because you are not using Dart Sass which supports this feature.

Also in the documentation you will find:

Only Dart Sass currently supports @use. Users of other implementations must use the @import rule instead.

So use @import until @use is supported.

BTW, If you want to use Dart Sass, just use sass instead of node-sass and require it in the webpack config, like:

// ...
{
  loader: 'sass-loader',
  options: {
    implementation: require('sass')
  }
}
// ...

sass import partials vs non-partials

If I understand your qestion correctly, here is answer:

If the Sass transpiler is watching a directory (either through the command window or via an editor extension), you'll want to exclude changes to these files from transpilation, and Sass makes it easy to do so. Just prepend an underscore to their names.

Source: https://www.tutorialsteacher.com/sass/import-files-and-partials

Let's say you use:

"scss": "sass web/assets/scss/main.scss web/assets/css/main.css --style=compressed --watch"

When transpiller watching changes in main.scss where you importing files, then you get output in main.css. Then it does not matter if you import partials or not.

If you watch a directory, for example:

"scss": "sass web/assets/scss/ web/assets/css/ --style=compressed --watch"

Then, if you don't use partials, you will get every file separate in addition.

Mixin partial and variables partial not detected when scss is compiled. Error: Undefined Mixin and Partial

As stated in the doc:

Members (variables, functions, and mixins) loaded with @use are only visible in the stylesheet that loads them. Other stylesheets will need to write their own @use rules if they also want to access them.

Which means that in order to read your variables and mixins, you need to import them directly in the files that use them and not on your global styles file.

On _globals.scss and _header.scss add:

@use "variables" as *;
@use "mixins" as *;

Additionally, if you don't want to import both files every time, you can create a new file that will forward them and then import only this file:

// _settings.scss (or any other name)
@forward "variables";
@forward "mixins";

// _globals.scss & _header.scss
@use "settings" as *;

SASS doesn't compile when one partial uses variable declared in another partial

It's very simple. You're importing the partials in the wrong order. Import the variables first (always), then the rest of the partials that make use of the variables.

sass\main.scss

@import "abstract/variable";
@import "base/typography";

PS: The file should be called variables (plural).

New rules are not feeding from a partial .scss files into the main .css file

You need to check the output files and your SCSS compilation process to make sure your output files are being compiled. Check the data stamps.

Sass can't @use members from partials

I have solved the problem by reinstalling Sass with npm. Problem was caused by installing Sass using the brew install sass/sass/sass command.

---

Related Topics