Question

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

例如，我有3个scss文件：

app.scss
base.scss
layout.scss

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

我想生成一个SCSS文件，基本上连接文件并且不处理sass。

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

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

由于

Answer 1

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

npm install -D bundle-scss

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

Answer 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);
  }
})();

Answer 3

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

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

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

3 个答案: