Выскажем свое мнение или вопросы:

I want to export this _theming.sass file from my lib, so people can import this file in their own sass file as @import '~@my-lib/ngx-components/theming' and start using all of the mixins available. If they want to have custom navbar, button etc, they should be able to use those mixins with single import.

Вам нужно знать, какова ваша целевая аудитория. В основном люди используют angular cli для создания своих приложений, таких как шаблон.

Итак, вам нужно предоставить комплект css (люди просто хотят импортировать ваш css) и комплект sass (кто хочет использовать ваш объект или ваш миксин).

I want to export this _theming.sass file from my lib, so people can import this file in their own sass file as @import '~@my-lib/ngx-components/theming' and start using all of the mixins available. If they want to have custom navbar, button etc, they should be able to use those mixins with single import.

I tried to make it look like angular-material theming setup.

Во-первых, вам нужно знать, что @angular/material не экспортирует sass (они используют scss), но они экспортируют css, скомпилированный scss-bundle (как вы его упомянули), см. Их код и документацию тема.

I thought "this is exactly what I want." However, it requires scss files, not sass files. It cannot read sass files.

Я хотел бы процитировать этот отвечать:

Sass is a CSS pre-processor with syntax advancements. Style sheets in the advanced syntax are processed by the program, and turned into regular CSS style sheets. However, they do not extend the CSS standard itself.

Лучше вам перенести свой код из sass в scss (самостоятельно), это не так уж много (я думаю, я всегда пишу scss вместо файла sass).

Решение:

1. Предоставьте css и sass (лучше scss)

Когда вы доставляете свои библиотеки компонентов, вы должны предоставить css и scss. Beacuse angular cli по умолчанию не предоставляет загрузчик scss.

Не используйте файл sass, используйте файл scss, см. Мой ответ наверху.

пакет scss + веб-пакет

Поскольку вам необходимо предоставить css, вы можете использовать плагин оболочки webpack для объединения scss. Scss должен предоставить cli, если вы хотите использовать cli.

2. Структурируйте свой scss

Хорошо, для этого случая возьмем образец из модуля bootstrap @ 4. Структура использования начальной загрузки, подобная этой (Документы):

scss
|-- _variables.scss
|-- _mixins.scss
|-- _functions.scss
|-- ...
|-- index.scss

внутри index.scss будет так:

@import 'variables'
@import 'mixins'
@import 'functions'
...

Итак, этот scss вы должны поставить рядом с css. Как и bootstrap, так и mixin будет доступен потребителю. Также это хороший подход, когда потребитель находит файл scss в папке scss (легко указать, какой файл scss вставлен).

ОБНОВИТЬ

Для объединения в один файл вам необходимо создать средство запуска задач, чтобы сделать это. В вашем случае, если вы хотите использовать веб-пакет, вы можете создать для этого плагин.

Вот пример плагина:

scss-bundle-plugin.js

вызвать вам config webpack:

plugins: [
   new webpack.NoEmitOnErrorsPlugin(),
   new SCSSBundlePlugin({
        file: path.join(__dirname, 'src/index.scss')
   })
],

Чтобы попробовать игровую площадку, проверьте привет-мир-загрузчик, затем:

# install dependency
npm install
# try play ground
npm run webpack

он создаст файл _theme.scss на ./dist.

Мой совет не использовать веб-пакет, вместо этого используйте средство запуска задач (gulp или grunt) в этом простом случае. Webpack тоже продвинутая и сложная для написания задача.

Мое решение для файлов scss / sass Я использовал небольшой модуль bundle-scss

Он объединяет файлы по маске имени файла. Поэтому вам нужно передать правильную маску, например ./src/**/*.theme.scss, указать целевой файл и, возможно, ваш собственный порядок сортировки

Вам не нужно создавать один файл точки входа со всем импортом. bundle-scss получит все файлы по маске, проанализирует весь импорт и также включит эти файлы

Также существует широко используемый пакет под названием scss-пакет.

Его довольно просто использовать, вы просто создаете файл конфигурации со всей необходимой конфигурацией, а затем запускаете scss-bundle.

Это, например, будет использовать все файлы scss, импортированные в entry.scss, и перемещать их в out.scss. Все операции импорта будут разрешены, за исключением тем angular в этом примере, например @import '~@angular/material/theming';.

scss-bundle.config.json:

{
  "bundlerOptions": {
    "entryFile": "my-project/src/entry.scss",
    "outFile": "dist/out.scss",
    "rootDir": "my-project/src",
    "project": "../../",
    "ignoreImports": [
      "~@angular/.*"
    ],
    "logLevel": "debug"
  }
}