Question

我从以下repo中安装了带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文件夹中？
Bonus，我如何告诉它缩小输出文件？（所以我可以尝试两种方式）？

Answer 1

编译是什么？

编译Sass文件会将样式表（使用Sass特定语法，如selector nesting和mixins）转换为可由浏览器解析的普通CSS。

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

由于你已经在使用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编译这个文件夹中的所有内容＆＃34;而是使用入口点文件（main.js），当您想要包含新文件时，只需添加一个@import directive及其相对路径。

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

要缩小生成的main.css文件，我建议csso。您可以使用npm i -D csso-cli安装its CLI package，然后将另一个脚本添加到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

享受;）

如何在大多数基本方法中编译SASS .scss文件（没有框架）

2 个答案: