Html 将多个 SCSS/SASS 文件转换为一个 CSS 文件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7307456/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Many SCSS/SASS files to one CSS file?
提问by voigtan
Is it possible to make sass listen to a directory with many sass files and generate one CSS file? I have found a way by including many sass files into one (style.scss):
是否可以让 sass 侦听包含许多 sass 文件的目录并生成一个 CSS 文件？我找到了一种方法，将许多 sass 文件包含在一个文件中（style.scss）：
@import "scss/header";
@import "scss/footer";
And then run the following code:
然后运行以下代码：
sass --watch style.scss:style.css
but the problem is that I have to change that file before I generate a new CSS file.
但问题是我必须在生成新的 CSS 文件之前更改该文件。
回答by Arnaud Le Blanc
If you watch the directory, sass will be able to notice changes in @imported files, and update dependent files.
如果您查看目录，sass 将能够注意到@imported 文件的变化，并更新相关文件。
style.scss:
样式.scss：
@import "header";
@import "footer";
And do:
并做：
sass --watch .
It will compile all files in the directory to .css; ignoring files whose name start with a _.
它将目录中的所有文件编译为.css；忽略名称以_.
I you modify _header.scss or _footer.scss, if will update style.scss too.
我你修改_header.scss 或_footer.scss，如果也会更新style.scss。
You can also output in an other directory:
您也可以在其他目录中输出：
sass --watch .:output_dir/
回答by Luwe
You can tell SASS to watch an entire folder with:
您可以通过以下命令告诉 SASS 查看整个文件夹：
sass --watch application/sass:public/stylesheets
If you import all your partial files, this should generate one file. Every time you edit a file in the folder, the CSS files will be generated automatically.
如果您导入所有部分文件，这应该会生成一个文件。每次编辑文件夹中的文件时，都会自动生成 CSS 文件。
回答by Dharam Mali
Just wanted to add, You can also call Variables ($) and Mixins from other files.
只是想补充一下，您还可以从其他文件中调用变量 ($) 和 Mixin。
For Example:
例如：
_variable.scss= $primary:#000
_header.scss= header {color:$primary;}
_footer.scss= footer {background:$primary}
_variable.scss= $primary:#000
_header.scss= header {color:$primary;}
_footer.scss=footer {background:$primary}
custom.scss:
自定义.scss：
@import "_variables.scss";
@import "_header.scss";
@import "_footer.scss";
Output = custom.css
输出 = custom.css
header {color:#000;}
footer {background:#000;}
回答by Jd Moneymaker
I was having quite a frantic googling session trying to resolve this issue.
Turns out it's quite simple if you're using Rictwick Live Sass Compiler on VS Code.
我有一个相当疯狂的谷歌搜索会话试图解决这个问题。
事实证明，如果您在 VS Code 上使用 Rictwick Live Sass Compiler，这将非常简单。
Make sure to save your sass/scss files starting with an underscore eg: _variables.scss, _mixin.scss.
@import them into the main style.scss file you want to compile. Eg:
@import "_mixins"; @import "_variables";- Pretty much that's it, you've compiled all your .scss files into a single CSS file.
确保保存以下划线开头的 sass/scss 文件，例如：_variables.scss、_mixin.scss。
@import 到你要编译的主 style.scss 文件中。例如：
@import "_mixins"; @import "_variables";- 差不多就是这样，您已经将所有 .scss 文件编译成一个 CSS 文件。
