作者:ABC张大脾气 | 来源:互联网 | 2022-12-23 17:59
TL; DR:我的问题是如何将我的一些sass文件捆绑到单个sass文件中?
我一直在开发一个Angular组件库,我用ng-packagr打包它.我们称之为@my-lib/ngx-components
.
我的lib的消费者将导入我的组件,如@my-lib/ngx-components/navbar
.
我决定为组件添加主题支持.
例如,我有一个带有默认颜色(背景,文本,悬停等)的导航栏组件.我希望我的库的消费者能够用自己的主题覆盖这些颜色.这就是为什么我写了一个mixin
接受$theme
输入并覆盖一些css规则的原因如下(这是我所拥有的基本版本)
_navbar-theme.sass
@mixin navbar-theme($theme)
$primary-color: map-get($theme, primary-color)
$secondary-color: map-get($theme, secondary-color)
$color: map-get($theme, color)
.navbar
background-color: $primary-color
color: $color
&:hover
background-color: $secondary-color
每个组件都有自己的*-theme.sass
文件.
我也有全局_theming.sass
文件,导入所有这些如下
_theming.sass
@import './components/navbar/navbar-theme'
@import './components/button/button-theme'
@import './components/dropdown/dropdown-theme'
我想_theming.sass
从我的lib 导出这个文件,所以人们可以在自己的sass
文件中导入这个文件,@import '~@my-lib/ngx-components/theming'
并开始使用所有mixin
可用的文件.如果他们想拥有定制的navbar
,button
等等,他们应该能够使用这些mixin
单进口秒.
我试图让它看起来像角度材料主题设置.
起初,我已经尝试过node-sass
哪些已经存在于我的依赖项中.但是,它试图将sass构建为css,因此它省略了输出文件中的mixins.
然后,我看了一下角质材料做了什么.他们使用scss-bundle
我想"这正是我想要的." 但是,它需要scss
文件,而不是sass
文件.它无法读取sass
文件.
然后,我想"好吧,我可以放弃sass并开始使用scss.如何将所有这些文件转换为scss而不用手工完成它们".然后,我找到了sass-convert.在这个问题中,据说我可以在命令行中使用它.但是,当我sass-convert
全局安装npm时,它没有给我一个命令行可执行文件.我想我需要Gulp
用它.
我Gulp
从一开始就习惯使用它,因为它意味着另一种学习工具,它增加了代码库的复杂性.
在这一点上,我觉得像"哈尔修灯泡"
TL; DR:我的问题是如何将我的一些sass文件捆绑到单个sass文件中?
此外,如果你能想出一个需要webpack的解决方案,那也没关系.