Expose sass variables to import them from the package

[Rusinas]

I'm not sure if this is the right place to ask this, but I am struggling with this for quite a long time now.

The idea is simple. I have npm package and it has some sass variables and mixins. And I need to provide them with the package, so in my projects I could just:

MyBeatifulProject/styles/main.sass:

@import '~my-lib/dist/sass/mixins` // or something like this

.custom-class
  // some stuff
  @mixin-from-my-lib

So, in order to make this working I have to put my mixins.sass in the dist somehow. And I don't have any ideas.

I am aware that this plugin just compiles .sass files to .css and put them in the dist the way I want to, but maybe somebody here can point me to the right direction.

[elycruz]

Hey @Rusinas,
So turns out that if you publish your package, and do not '.npmignore' the directories with your *.sass files, the files will be importable via @import syntax: E.g.,

@import 'node_modules/my-lib/sass/mixins';  // The '~' only works in tools that support it (Angular, etc.).

// ...

Also if all you're publishing is sass files then you should be able to set your package.json's main field to the directory where your sass files live (I recall this working with earlier versions of npm not sure if it still works though (can't find mention of it in the documentation (https://docs.npmjs.com/cli/v8/configuring-npm/package-json#main)).

[elycruz]

@Rusinas Hey, actually an even better idea might be to not worry about putting your sass files in the 'dist/' directory due them being directly importable, if the are deployed with your package:

{example-project}/
  mixins/
  ....

somewhere_in_app_code.scss

// If using a build tool that allows the `~` symbol:
@import "~{example-project}/mixins";

// If no `~` support
@import "node_modules/{example-project}/mixins";

A bit cleaner (IMO)

[elycruz]

@Rusinas Hey,
Node.js, and webpack (as well as other tools) now support the 'package.json.exports' field - In this field you can specify your sass and it will be automatically importable/recognized, when using tools that support the feature (webpack, node, etc.).

Example:

package.json:

{
  "exports": {
    "./scss/*": {
      "sass": "./src/scss/*",
      "default": "./src/scss/*"
    }
   }
}

exports field docs:

• On webpack docs: https://webpack.js.org/guides/package-exports/
• On node docs: https://nodejs.org/api/packages.html#exports

Also, note, this feature has been tested on client projects running both webpack 5, and/or Angular 13, and works as expected.

If you need any further help please feel free to re-open the ticket.

-- Closing ticket since solutions are available