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
.
として出力されます。