将sass文件捆绑到单个sass文件中

Question

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的解决方案,那也没关系.

Answer 1

让我们来看看您的意见或问题：

我想从我的 lib 中导出这个 _theming.sass 文件，这样人们就可以在自己的 sass 文件中将此文件导入为 @import '~@my-lib/ngx-components/theming' 并开始使用所有可用的 mixin。如果他们想要自定义导航栏、按钮等，他们应该能够通过单一导入来使用这些 mixin。

您需要知道您的目标受众是什么。大多数人使用 Angular cli 来创建他们的应用程序，例如模板 Scratch。

所以你需要提供cssbundle（人们只想导入你的css）和sassbundle（他们想要使用你的对象或你的mixin）。

我想从我的 lib 中导出这个 _theming.sass 文件，这样人们就可以在自己的 sass 文件中将此文件导入为 @import '~@my-lib/ngx-components/theming' 并开始使用所有可用的 mixin。如果他们想要自定义导航栏、按钮等，他们应该能够通过单一导入来使用这些 mixin。

我试图让它看起来像角度材料主题设置。

首先，您需要知道@angular/material不导出sass（他们使用 scss），但他们导出由scss-bundle（正如您提到的）编译的 css 查看他们的代码和文档主题。

我想“这正是我想要的”。但是，它需要 scss 文件，而不是 sass 文件。它无法读取 sass 文件。

我想引用这个答案：

Sass 是一个具有语法改进的 CSS 预处理器。高级语法中的样式表经过程序处理后，变成常规的CSS样式表。然而，它们并没有扩展 CSS 标准本身。

最好你需要将你的代码从 sass 转移到 scss （你自己），这样做不会太多（我想，我总是写 scss 而不是 sass 文件）。

解决方案：

1.提供css和sass（s​​css更好）

当您交付组件库时，您必须提供css和scss。scss因为 Angular cli默认不提供loader。

不要使用sass文件，使用scss文件请参阅我上面的参考答案。

scss 捆绑 + webpack

既然你必须提供css，你可以通过webpack shell插件来捆绑scss。scss已经提供了cli，如果你想使用cli。

2.构建你的scss

好的，让我们从 bootstrap@4 模块中获取本例的示例。Bootstrap 使用这样的结构（文档）：

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

里面index.scss会有这样的：

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

所以，这个scss你必须在旁边交付css。就像这样bootstrap做，然后mixin将提供给消费者。当消费者在文件夹中查找scss文件时，这也是一个好方法scss（很容易指出哪个是 scss 放入的）。

更新

对于捆绑到单个文件，您必须创建任务运行程序才能执行此操作。如果您想使用 webpack，您可以创建一个插件来完成它。

这里是示例插件：

scss-bundle-plugin.js

调用你的配置 webpack：

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

要尝试 Playground，请检查hello-world-loader：

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

它将_theme.scss在 处创建文件./dist。

对于这个简单的情况，我的建议是不要使用 webpack，而是使用任务运行程序（gulp 或 grunt）。Webpack 太先进并且很难编写任务。