如何用最基本的方法编译SASS .scss文件（无框架）

Question

我从以下存储库安装了带有 SASS 的 Bootstrap CSS：

https://github.com/twbs/bootstrap-sass

"bower install bootstrap-sass"我在命令行上运行了该命令，这成功地将文件夹安装bower_components到了我的项目文件夹中。（顺便说一句 - 我还没有其他东西，我想先学习引导 CSS 编译）。

好的，这就是我想要完成的任务：

• 我希望能够将.scss文件添加到我创建的名为resources/assets/sass/
• 我想配置/管理，以便.scss我添加到此目录的文件依次编译为public/build/css/that_file_name.css
• 更实际的是，我想将所有 .scss 文件编译成一个大的 .css 文件。

我的问题是：

• 编译有什么作用？
• 我如何指示它编译.scss文件夹中上面文件夹中的文件public/build/css/？
• 我必须配置新的 .scss 文件还是可以设置它以便将它们添加到该 sass 文件夹中？
• 奖金，我如何告诉它缩小输出文件，或者不缩小（这样我可以尝试两种方式）？

Answer 1

编译有什么作用？

编译 Sass 文件会将具有 Sass 特定语法（例如选择器嵌套和混合）的样式表转换为可以由浏览器解析的普通 CSS。

如何指示它编译文件夹中上面文件夹中的.scss 文件public/build/css/？

由于您已经在使用 Bower，它是一个 Node.js 包，因此我假设您使用 Node.js 包node-sass而不是原始的 Ruby 版本没有问题。

首先，使用安装包npm i -D node-sass。然后，在项目中创建一个新脚本package.json：

"compile-sass": "node-sass resources/assets/sass/main.scss public/build/css/main.css"

main.scss现在是您导入 Bootstrap 和其他样式表的入口点。

// I don't know whether this path is correct
// Just find out the location of "_bootstrap.scss" and then create the relative path
@import "../../../bower_components/bootstrap-sass/assets/stylesheets/_bootstrap.scss";

/* Your custom SCSS */

最后，要实际运行编译，请npm run compile-sass在终端中执行。

我必须配置新的 .scss 文件还是可以设置它以便将它们添加到该 sass 文件夹中？

由于您从未告诉过node-sass“编译此文件夹内的所有内容”，而是使用入口点文件 ( main.js)，因此当您想要包含新文件时，您只需添加一个带有相对路径的@import指令即可。

奖金，我如何告诉它缩小输出文件，或者不缩小（这样我可以尝试两种方式）？

为了缩小生成的main.css文件，我建议csso. 您可以使用安装其 CLI 包npm i -D csso-cli，然后将另一个脚本添加到您的package.json：

"minify-css": "csso public/build/css/main.css public/build/css/main.min.css"

然后您可以使用 运行该脚本npm run minify-css。缩小后的文件将输出为main.min.css.

Answer 2

对于所有提出的问题，都可以在上面找到答案。但如果您只是想使用命令行将 .scss 文件编译为 .css，请使用下面的内容，

sass source/stylesheets/index.scss build/stylesheets/index.css

确保您安装了“node JS/npm”和 Sass 编译器。

如果没有，请使用它来安装 Node.js 和 npm - https://www.npmjs.com/get-npm

并使用它来安装 Sass - https://sass-lang.com/install

享受 ;）