将多个SASS文件合并为一个SASS文件
将多个SASS文件合并为一个SASS文件
提问于 2014-11-25 00:13:57
谁知道有没有办法将多个SASS/SCSS文件组合成一个SASS/SCSS文件。我的意思是“进入一个SASS/SCSS”，而不是到一个CSS文件。
例如，我有3个scss文件：
app.scssbase.scsslayout.scss
app.scss文件包含两个到base.scss和layout.scss的导入。
我希望能够生成1 SCSS文件，基本上连接的文件，而不是处理的sass。
搜索相当困难，因为返回的所有内容都与组合到CSS中有关。
我为什么要这样做呢？基本上，我想从codepen (其他在线代码编辑器)中轻松引用一组SCSS文件。
谢谢
回答 3
Stack Overflow用户
发布于 2018-04-04 12:39:18
我通过掩码分析所有文件，找到其中的所有导入并连接到一个文件中。所以我不需要一个入口点
npm install -D bundle-scss
"script": {
"postbuild": "npm run themes",
"themes": "bundle-scss -m \"./src/**/*.theme.scss\" -d \"./dist/themes.scss\""
}Stack Overflow用户
发布于 2020-10-14 21:36:46
scss-bundle解决了这个问题https://github.com/reactway/scss-bundle
警告：不支持较新的基于模块的导入。Issue #90
Stack Overflow用户
发布于 2018-06-06 04:09:52
你可以为javascript修改它。将它保存在typescript中，因为我目前正在自己解决这个问题(angular 6库)，并遇到了这个问题。
根据文档，angular material使用此实现。
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);
}
})();
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/27109211
复制相关文章
相似问题