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

TL；DR：我的问题是如何将我的一些sass文件捆绑到单个sass文件中？

我一直在开发一个角度组件库，并用ng Packagegr打包。让我们称之为

@my lib/ngx components

my lib的使用者将导入我的组件，如

@my lib/ngx components/navbar

我决定为组件添加主题支持

例如，我有一个带有默认颜色（背景、文本、悬停等）的导航栏组件。我希望我的库的使用者能够用他们自己的主题覆盖这些颜色。这就是为什么我编写了一个

mixin

，它接受

$theme

输入并覆盖一些css规则，如下所示（这是我所拥有的基本版本）

\u 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

@import './components/navbar/navbar-theme'
@import './components/button/button-theme'
@import './components/dropdown/dropdown-theme'

每个组件都有自己的

*-theme.sass

文件

我还有一个global

\u theming.sass

文件，它导入了所有这些内容，如下所示

\u theming.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

@import './components/navbar/navbar-theme'
@import './components/button/button-theme'
@import './components/dropdown/dropdown-theme'

我想从我的库中导出这个

\u theming.sass

文件，这样人们就可以将这个文件作为

@import'~@my lib/ngx components/theming'

导入到自己的

sass

文件中，并开始使用所有可用的

mixin

了。 如果他们想要定制

导航栏

，

按钮

等，他们应该能够通过一次导入使用这些

mixin

s

我试图使它看起来像角材料专题设置

首先，我尝试了

节点sass

，它已经在我的依赖项中。但是，它试图将sass构建到css中，以便在输出文件中省略mixin

然后，我看了一下棱角材料做了什么。他们使用

我认为“这正是我想要的。”然而，它需要

scs

文件，而不是

sass

文件。它无法读取

sass

文件

然后，我想“好吧，我可以放弃sass，开始使用scss。我如何将所有这些文件转换为scss而不必手动查看它们呢？”。然后，我发现。据说我可以在命令行中使用它。但是，当我使用npm全局安装

sass convert

时，它没有给我一个命令行可执行文件。我想我需要喝一口才能使用它

我从一开始就避免使用

Gulp

，因为这意味着另一种学习工具，它增加了代码库的复杂性

在这一点上，我觉得

TL；DR：我的问题是如何将我的一些sass文件捆绑到单个sass文件中？

---

另外，如果你能想出一个需要webpack的解决方案，那也没关系。

让我们看看你的观点或问题：

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

你需要知道，你的目标受众是什么。大多数人使用angular cli创建类似于应用程序的模板抓取

因此，您需要提供

css

bundle（人们只想导入您的css）和

sass

bundle（谁想使用您的对象或mixin）

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

我试图使它看起来像角材料专题设置

首先，您需要知道，

@angular/material

不会导出

sass

（他们使用scss），但会导出css，然后由

scss bundle

编译（如您所述）查看他们的文档

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

我想引述如下：

Sass是一种具有语法改进的CSS预处理器。中的样式表 高级语法由程序处理，并转换为 常规CSS样式表。但是，它们并没有扩展CSS标准 本身

最好您需要（自己）将代码从sass传输到scss，这样做不会太多（我认为，我总是编写scss而不是sass文件）

---

解决方案： 1.提供css和sass（scss更好） 交付组件库时，必须提供

css

和

scss

。因为默认情况下angular cli不提供

SCS

加载程序

不要使用

sass

文件，使用

scss

文件请参见顶部的我的参考答案

scss捆绑包+网页包

因为您必须提供css，所以您可以绑定SCS。如果要使用cli，SCS必须提供cli

2.构建您的SCS 好的，让我们从bootstrap@4本案例的模块。引导使用如下（）的结构：

内部

index.scss

将具有以下特性：

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

因此，这个

scss

您必须在

css

旁边交付。像

bootstrap

do一样，消费者可以使用

mixin

。此外，当消费者在

scss

文件夹中查找

scss

文件时，这也是一种很好的方法（很容易找到放置在其中的scss）

---

更新 对于捆绑到单个文件，您必须创建TaskRunner来完成。如果你想使用webpack，你可以创建一个插件

以下是示例插件：

调用您的配置网页：

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

要尝试游乐场，请签出：

它将在

/dist

处创建文件

\u theme.scss

---

我的建议是不要使用webpack，对于这个简单的例子，使用TaskRunner（吞咽或咕噜）。网页包太高级，难以编写任务。

我的scss/sass fil解决方案

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