blocks|key|38246|text|我通过掩码分析所有文件，找到其中的所有导入并连接到一个文件中。所以我不需要一个入口点|type|unstyled|depth|inlineStyleRanges|entityRanges|data|38247|npm+install+-D+bundle-scss

"script":+{
++"postbuild":+"npm+run+themes",
++"themes":+"bundle-scss+-m+\"./src/**/*.theme.scss\"+-d+\"./dist/themes.scss\""
}|code-block|syntax|javascript|38248|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I analyze all files by the mask, find all imports inside and concatenate into one file. So I don't need one entry point

<pre><code>npm install -D bundle-scss

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

blocks|key|2718700|text|你可以为javascript修改它。将它保存在typescript中，因为我目前正在自己解决这个问题(angular+6库)，并遇到了这个问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2718701|根据文档，angular+material使用此实现。|2718702|​|2718703|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);
++}
})();|code-block|syntax|javascript|2718704|2718705|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|P|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|Q|8|@]|9|@]|A|$I|J]]|$1|K|3|E|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

You could modify this for javascript. Kept it in typescript as I am currently solving this issue on my own (angular 6 library), and ran into this question. 

According to the docs, angular material uses this implementation. 

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>import * as path from 'path';
import { Bundler } from 'scss-bundle';
import * as fs from 'fs';

(async () =&gt; {
 // 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 &amp;&amp; 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);
 }
})();</code></pre>
</div>
</div>

blocks|key|38668|text|scss-bundle解决了这个问题https://github.com/reactway/scss-bundle|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|38669|警告：不支持较新的基于模块的导入。Issue+#90|style|BOLD|38670|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/reactway/scss-bundle|1|https://github.com/reactway/scss-bundle/issues/90^0|I|13|0|0|0|3|H|9|1|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@$A|S|B|T|1|U]]|C|$]]|$1|D|3|E|5|6|7|V|8|@$A|W|B|X|F|G]]|9|@$A|Y|B|Z|1|10]]|C|$]]|$1|H|3|-4|5|6|7|11|8|@]|9|@]|C|$]]]|I|$J|$5|K|L|M|C|$N|O]]|P|$5|K|L|M|C|$N|Q]]]]

scss-bundle solves this problem
<a href="https://github.com/reactway/scss-bundle" rel="nofollow noreferrer">https://github.com/reactway/scss-bundle</a>
Caution: Does not support newer module based imports. <a href="https://github.com/reactway/scss-bundle/issues/90" rel="nofollow noreferrer">Issue #90</a>

Does anyone know if there is a way to combine multiple SASS/SCSS files into one SASS/SCSS file. I do mean "into one SASS/SCSS" and not into a CSS file. 

For example, I have 3 scss files:

<ul>
<li><code>app.scss</code></li>
<li><code>base.scss</code></li>
<li><code>layout.scss</code></li>
</ul>

The app.scss file contains 2 imports to <code>base.scss</code> and <code>layout.scss</code>.

I would like to beable to generate 1 SCSS file that basically concatenates the files and does not process the sass.

It's fairly difficult to search for as everything that gets return is to do with combining into CSS.

Why would I want to do this? Basically, I'd like to easily reference a set of SCSS files from within a codepen (other online code editor).

Thanks

Combining Multiple SASS files into one SASS file

谁知道有没有办法将多个SASS/SCSS文件组合成一个SASS/SCSS文件。我的意思是“进入一个SASS/SCSS”，而不是到一个CSS文件。例如，我有3个scss文件：app.scssbase.scsslayout.scssapp.scss文件包含两个到base.scss和layout.scss的导入。我希望能够生...

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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