How to compile SASS .scss files in most basic method (without framework)

What does the compiling?

Sassファイルのコンパイルは、セレクタ入れ子やミキシンのようなSass固有の構文のスタイルシートをブラウザが解析できる通常のCSSに変換します。

上のフォルダーの public/build/css/ フォルダーにある .scss ファイルをコンパイルするように指示する方法は?

すでに Node.js パッケージである Bower を使用しているので、オリジナルの Ruby バージョンではなく Node.js パッケージ node-sass を使用して問題ないと推測されます。

"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 を実行します。

node-sass に「このフォルダー内のすべてをコンパイルする」と指示せず、代わりにエントリ ポイント ファイル (main.js) を使用するので、新しいファイルを含める場合は、単に相対パスで @import 命令を追加するだけです。

Bonus, how do I tell it to minify the output file or not (so I can experiment with both ways)?

結果の 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 を使ってそのスクリプトを実行できます。 minifiedされたファイルは main.min.css.

として出力されます。

コメントを残す

メールアドレスが公開されることはありません。