问如何用最基本的方法(没有框架)编译SASS .scss文件

EN

编译是什么？

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

如何指示它在上面的文件夹中编译.scss文件？

由于您已经在使用作为Node.js包的Bower，所以我假设您没有问题使用Node.js包node-sass而不是原始的node-sass版本。

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

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

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

// 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)，所以当您想要包含一个新文件时，只需添加一个具有相对路径的指令。

奖金，我如何告诉它缩小输出文件，或不(所以我可以试验这两种方式)？

为了缩小结果的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。

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

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

确保安装了"node /npm“和Sass编译器。

如果没有，请使用此方法安装Node.js和npm - https://www.npmjs.com/get-npm。

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

享受;)