将 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 文件，这样人们就可以在他们自己的sass 文件中将此文件作为@import '~@my-lib/ngx-components/theming' 导入并开始使用所有可用的mixins。 如果他们想要自定义 navbar、button 等，他们应该能够通过单一导入使用这些 mixins。

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

起初，我尝试了node-sass，它已经在我的依赖项中。但是，它尝试将 sass 构建到 css 中，因此它在输出文件中省略了 mixins。

然后，我看看 angular-material 做了什么。他们使用scss-bundle

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

然后，我想“好吧，我可以放弃 sass 并开始使用 scss。如何将所有这些文件转换为 scss 而无需手动处理”。然后，我找到了sass-convert。 In this question 据说我可以在命令行中使用它。但是，当我使用 npm 全局安装 sass-convert 时，它没有给我一个命令行可执行文件。我想我需要Gulp 才能使用它。

我从一开始就避免使用Gulp，因为它意味着另一种学习工具，它增加了代码库的复杂性。

此时，我感觉就像"Hal fixing light bulb"

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

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

Answer 1

还有一个被广泛使用的包，叫做scss-bundle。

使用起来非常简单，只需创建一个包含所有相关配置的配置文件，然后运行 ​​scss-bundle。

例如，这将使用在 entry.scss 中导入的所有 scss 文件并将其移动到 out.scss。所有导入都会被解析，除了这个例子中的角度主题，比如@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"
  }
}

Answer 2

我的 scss / sass 文件解决方案 我用过小模块bundle-scss

它通过文件名掩码捆绑文件。所以你需要传递正确的掩码，比如./src/**/*.theme.scss 指定目标文件，也许你的自定义排序顺序

您不必创建一个包含所有导入的入口点文件。 bundle-scss 将通过掩码获取所有文件分析所有导入并包含此文件

Answer 3

让我们通过您的意见或问题：

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

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

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

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

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

首先，您需要知道@angular/material 不会导出sass（他们使用scss），而是导出由scss-bundle 编译的css（正如您提到的那样），请参阅他们的code 和文档@987654322 @。

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

我想引用这个answer:

Sass 是一个具有语法改进的 CSS 预处理器。样式表在 高级语法经过程序处理，转化为 常规的 CSS 样式表。但是，它们没有扩展 CSS 标准 自己。

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

---

解决方案：

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

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

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

scss-bundle + webpack

既然你必须提供css，你可以webpack shell plugin来捆绑scss。 scss有提供cli，如果你想用cli的话。

2。构建你的 scss

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

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')
   })
],

要尝试游乐场，请查看hello-world-loader 然后：

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

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

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