将多个 SASS 文件合并为一个 SASS 文件答案

【问题标题】：Combining Multiple SASS files into one SASS file将多个 SASS 文件合并为一个 SASS 文件
【发布时间】：2015-01-22 10:09:44
【问题描述】：

有谁知道是否有办法将多个 SASS/SCSS 文件合并到一个 SASS/SCSS 文件中。我的意思是“合并为一个 SASS/SCSS”，不是合并为一个 CSS 文件。

例如，我有 3 个 scss 文件：

app.scss
base.scss
layout.scss

app.scss 文件包含 2 个对 base.scss 和 layout.scss 的导入。

我希望能够生成 1 个基本上连接文件并且不处理 sass 的 SCSS 文件。

搜索起来相当困难，因为返回的所有内容都与合并到 CSS 中有关。

我为什么要这样做？基本上，我想在 codepen（其他在线代码编辑器）中轻松引用一组 SCSS 文件。

谢谢

【问题讨论】：

stackoverflow.com/questions/2477271/… 或 stackoverflow.com/questions/4969641/…
真是个笨蛋——我在 SASS 方面的想法太多了。这完全有道理......
你可以使用 Gulp stackoverflow.com/questions/37133297/…

标签： sass

【解决方案1】：

我通过掩码分析所有文件，找到里面的所有导入并连接到一个文件中。所以我不需要一个入口点

npm install -D bundle-scss

"script": {
  "postbuild": "npm run themes",
  "themes": "bundle-scss -m \"./src/**/*.theme.scss\" -d \"./dist/themes.scss\""
}

【讨论】：

【解决方案2】：

您可以针对 javascript 进行修改。将它保存在打字稿中，因为我目前正在自己解决这个问题（角度 6 库），并遇到了这个问题。

根据文档，角度材料使用此实现。

import * as path from 'path';
import { Bundler } from 'scss-bundle';
import * as fs from 'fs';

(async () => {
  // Absolute project directory path.
  // Assuming all of your scss files are in `./projects/my-library/src/styles`
  const projectDirectory = path.resolve(__dirname, './projects/my-library/src/styles');
  const bundler = new Bundler(undefined, projectDirectory);
  // Relative file path to project directory path.
  // The name of your file here would be `app.scss`
  // Kept this here if anyone runs into this answer and wants to do this with the new angular 6 library.
  const { found, bundledContent } = await bundler.Bundle('./_all-theme.scss');

  if (found && bundledContent) {
    // where you want to save the file, and what you would like it to be called. 
    const location = path.resolve(__dirname, '_theming.scss');
    fs.writeFileSync(location, bundledContent);
  }
})();

【讨论】：

【解决方案3】：

scss-bundle 解决了这个问题 https://github.com/reactway/scss-bundle

警告：不支持基于模块的较新导入。 Issue #90

【讨论】：