# { } scss-to-css
### すべての SCSS ファイルを再帰的に圧縮された CSS にコンパイルします。
## ⚡ インストール
**グローバル ユーティリティ**として:
```
$ npm install -g @adamlui/scss-to-css
```
**開発者の依存関係** (ビルド スクリプトなど) として、プロジェクト ルートから次のようにします:
```
$ npm install -D @adamlui/scss-to-css
```
**実行時の依存関係** (たとえば、オンザフライ コンパイルの場合) として、プロジェクト ルートから次のようにします:
```
$ npm install @adamlui/scss-to-css
```
## 💻 コマンドラインの使用法
基本的な **グローバル コマンド**は次のとおりです:
```
$ scss-to-css
```
サンプル出力:
**📝 注:** `-S` または `--no-source-maps` が渡されない限り、ソース マップもデフォルトで生成されます。
#
**入力/出力** パスを指定するには:
```
$ scss-to-css [input_path] [output_path]
```
- `[input_path]`: 現在の作業ディレクトリを基準とした、コンパイル対象の SCSS ファイルまたは SCSS ファイルを含むディレクトリへのパス。
- `[output_path]`: CSSファイルとソースマップファイルが保存されるファイルまたはディレクトリへのパス。入力ルートからの相対パスで指定します（指定しない場合は `css/` が使用されます）。
**📝 注:** フォルダーが渡された場合、`-R` または `--no-recursion` が渡されない限り、ファイルは再帰的に処理されます。
#
**パッケージ スクリプト**として使用するには、プロジェクトの `package.json` で次のようにします:
```json
"scripts": {
"build:css": ""
},
```
`` を `scss-to-css` + オプションの引数に置き換えます。 次に、`npm run build:css` を使用してコマンドを実行できます。
#
### コマンド例
**現在のディレクトリ** にあるすべての SCSS ファイルをコンパイルします (`css/` に出力します):
```
$ scss-to-css
```
**特定のディレクトリ**内のすべての SCSS ファイルをコンパイルします (`css/path/to/your/directory/` に出力されます):
```
$ scss-to-css path/to/your/directory
```
**特定のファイル**をコンパイルします (`css/path/to/your/file.min.css` に出力されます):
```
$ scss-to-css path/to/your/file.scss
```
**入力ディレクトリと出力** ディレクトリの両方を指定します (出力は `output_folder/` にあります):
```
$ scss-to-css input_folder output_folder
```
**📝 注:** 出力 CSS は、`-M` または `--no-minify` が渡されない限り縮小されます。
#
### コマンドラインオプション
```
ブール値のオプション:
-n, --dry-run 実際にファイルをコンパイルするのではなく、ファイルが処理されるかどうかを示すだけです。
-d, --include-dotfolders ファイル検索にドットフォルダーを含めます。
-S, --no-source-maps ソース マップが生成されないようにします。
-M, --no-minify 出力 CSS の縮小を無効にします。
-R, --no-recursion 再帰的なファイル検索を無効にします。
-r, --relative-output 出力ファイルは、入力ルートではなく、各ソースファイルからの相対パスで指定されます。
-c, --copy 単一のソース ファイルが処理される場合は、コンパイルされた CSS をファイルに書き込むのではなく、クリップボードにコピーします。
-q, --quiet エラーを除くすべてのログを抑制します。
パラメータオプション：
--ignores="dir/,file1.scss,file2.sass" コンパイルから除外するファイル／ディレクトリ。
--comment="comment" コンパイルされた CSS の先頭にヘッダー コメントを追加します。'\n' を使用して行で区切ります。
--ui-lang="code" UI を表示する言語の ISO 639-1 コード。
--config="path/to/file" カスタム設定ファイルを読み込む。
コマンド：
-i, --init 設定ファイルを作成する（プロジェクトルートに作成されます）。
-h, --help ヘルプ画面を表示します。
-v, --version バージョン番号を表示します。
--stats npm の統計を表示します。
--debug [targetKey] デバッグ ログを表示します。
```
#
### 設定ファイル
**scss-to-css** は、プロジェクトルートに配置された `scss-to-css.config.mjs` または `scss-to-css.config.js` ファイルを使用してカスタマイズできます。
デフォルト設定例：
```js
export default {
dryRun: false, // ファイルを実際に圧縮せず、処理対象となるファイルのみを表示します
includeDotFolders: false, // ファイル検索時にドットフォルダを含めます
noSourceMaps: false, // ソースマップの生成を無効にします
noMinify: false, // 出力CSSの圧縮を無効にします
noRecursion: false, // 再帰的なファイル検索を無効にします
relativeOutput: false, // 出力ファイルを入力ルートではなく、各ソースファイルからの相対パスで出力します
copy: false, // 単一ファイル処理の場合、コンパイルされたCSSをファイルに書き込まずにクリップボードにコピーします
quietMode: false, // エラー以外のすべてのログ出力を抑制します
ignores: '', // 圧縮から除外するファイル/ディレクトリ
comment: '' // 圧縮されたコードの先頭に追加するヘッダーコメント
}
```
💡 プロジェクトルートにテンプレートとなる `scss-to-css.config.mjs` ファイルを生成するには、`scss-to-css init` コマンドを実行してください。
## 🔌 API の使用法
**scss-to-css** をアプリにインポートして、ECMAScript モジュールまたは CommonJS モジュールの両方として API メソッドを使用することもできます。
#### ECMAScript*:
```js
import scssToCSS from '@adamlui/scss-to-css'
```
#### CJS:
```js
const scssToCSS = require('@adamlui/scss-to-css')
```
###### _*Node.js バージョン 14 以降が必要_
#
### `compile(input[, options])`
💡 指定された文字列入力に基づいて SCSS をコンパイルします。
**ソース コード** が渡された場合、それは直接コンパイルされ、`srcPath` + `code` + `srcMap` + `error` を含むオブジェクトが返されます:
```js
const srcCode = 'h1 { font-size: 40px ; code { font-face: Roboto Mono }}',
compileResult = scssToCSS.compile(srcCode)
console.log(compileResult.error) // 実行時エラーを出力するか、エラーがない場合は `undefined` を出力します
console.log(compileResult.code) // 縮小されたCSSを出力します: 'h1{font-size:40px}h1 code{font-face:Roboto Mono}'
```
**ファイル パス**が渡された場合、ファイルのコードがロードされて CSS にコンパイルされ、上記のようなオブジェクトが返されます。
**ディレクトリ パス**が渡された場合、SCSS ファイルが検索され (デフォルトでは再帰的)、それぞれのコードがロードされてコンパイルされ、`srcPath` + `code` + `srcMap` + `error` を含むオブジェクトの配列が返されます:
```js
// 作業ディレクトリ + ネストされたすべてのディレクトリ内の SCSS ファイルへのパスを出力します
const compileResults = scssToCSS.compile('.')
compileResults.forEach(result => console.log(result.srcPath))
// 見つかった場合は 2 番目の SCSS ファイルからコンパイルされた CSS を出力し、見つからなかった場合は `undefined` を出力します
console.log(compileResults[1].code)
```
オプションはブール値であり、オブジェクトのプロパティとして渡されます。 例えば：
```js
// `.code` に縮小されていない CSS が含まれるデータ オブジェクトの配列を返します
scssToCSS.compile(inputDir, { minify: false })
```
利用可能なパラメータ (およびそのデフォルト設定) は次のとおりです:
名前 | タイプ | 説明 | デフォルト値
-----------------|----------|----------------------------------------------------------------------------------|-------------
`recursive` | ブール値 | ディレクトリパスが渡された場合、ネストされたファイルを再帰的に検索します。 | `true`
`verbose` | ブール値 | コンソール/ターミナルにログを表示します。 | `true`
`dotFolders` | ブール値 | ファイル検索にドットフォルダーを含めます。 | `false`
`minify` | ブール値 | 出力 CSS を縮小します。 | `true`
`sourceMaps` | ブール値 | CSS ソースマップを生成します。 | `true`
`relativeOutput` | ブール値 | 出力ファイルは、入力ルートではなく、各ソースファイルからの相対パスで指定されます。 | `false`
`ignores` | 配列 | コンパイルから除外するファイル／ディレクトリ。 | `[]`
`comment` | 文字列 | コンパイルされた CSS の先頭に追加するヘッダー コメント。'\n' を使用して行で区切ります。 | `''`
#
### `findSCSS(searchDir[, options])`
💡 渡された `searchDir` 文字列内のすべての SCSS ファイルを検索し ([`compile()`](#compileinput-options) が処理するファイルを見つけるのに役立ちます)、そのファイルパスを含む配列を返します。
オプションはブール値であり、オブジェクトのプロパティとして渡されます。 例えば：
```js
// 正確に assets/scss で SCSS ファイルを検索します
const searchResults = scssToCSS.findSCSS('assets/scss', { recursive: false })
console.log(searchResults)
/* サンプル出力:
findSCSS() » Searching for SCSS files...
findSCSS() » Search complete! 2 files found.
findSCSS() » Check returned array.
[
'E:\\js\\utils\\scss-to-css\assets\\scss\\foo.scss',
'E:\\js\\utils\\scss-to-css\assets\\scss\\bar.sass'
]
*/
```
利用可能なパラメータ (およびそのデフォルト設定) は次のとおりです:
名前 | タイプ | 説明 | デフォルト値
--------------|---------|--------------------------------------------------------------|-------------
`recursive` | ブール値 | 渡された searchDir 内のネストされたファイルを再帰的に検索します。 | `true`
`verbose` | ブール値 | コンソール/ターミナルにログを表示します。 | `true`
`dotFolders` | ブール値 | ファイル検索にドットフォルダーを含めます。 | `false`
`ignores` | 配列 | 検索結果から除外するファイル／ディレクトリ。 | `[]`
## 🏛️ MIT ライセンス
**著作権 © 2024 [Adam Lui](https://github.com/adamlui) と貢献者**
本ソフトウェアおよび関連ドキュメント ファイル (以下「ソフトウェア」) のコピーを入手した人には、使用、コピー、変更、マージする権利を含むがこれらに限定されない、制限なくソフトウェアを取り扱う許可が、ここに無償で与えられます。 、以下の条件を条件として、本ソフトウェアのコピーを出版、配布、サブライセンス、および/または販売すること、および本ソフトウェアが提供される人物にそれを許可すること。
上記の著作権表示およびこの許可通知は、ソフトウェアのすべてのコピーまたは主要部分に含まれるものとします。
ソフトウェアは「現状のまま」提供され、明示的か黙示的かを問わず、商品性、特定目的への適合性、および非侵害の保証を含むがこれらに限定されない、いかなる種類の保証も行われません。 いかなる場合においても、作者または著作権所有者は、契約行為、不法行為、またはその他の行為であるかどうかにかかわらず、ソフトウェアまたはソフトウェアの使用またはその他の取引に起因または関連して生じる、いかなる請求、損害、またはその他の責任に対しても責任を負わないものとします。 ソフトウェア。
## 🛠️ 関連ユーティリティ
### [ minify.js](https://github.com/adamlui/minify.js/#readme) 
> すべての JavaScript ファイルを再帰的に縮小します。
[インストール](https://github.com/adamlui/minify.js/tree/main/node.js/#-installation) /
[お読みください](https://github.com/adamlui/minify.js/tree/main/node.js/#readme) /
[CLI の使用法](https://github.com/adamlui/minify.js/tree/main/node.js/#-command-line-usage) /
[API の使用法](https://github.com/adamlui/minify.js/tree/main/node.js/#-api-usage) /
[話し合う](https://github.com/adamlui/minify.js/discussions)
**その他の JavaScript ユーティリティ** /
話し合う /
バグを報告する /
脆弱性を報告する /
トップに戻る ↑
