sassをcssにリアルタイム変換。npmを使ってオプション付きでコンパイルする方法。[Dart Sass]

ハウツー
コロのicon
コロ

環境確認

💡
node-sass, Lib-sassは非推奨になるので、この記事ではDart Sassを使用しています。

Node.jsのバージョン

node.jsがインストールされているか確認
$ node -v

階層構造

|-- index.html `-- styles |-- css `-- sass `-- style.scss
An image from Notion

Sassをコンパイルする

sass-compile-test というフォルダで説明していきます。

1. package.jsonを作る

$ cd /[path-to]/sass-compile-test // [path-to]は作業階層までのpathです。 $ npm init Press ^C at any time to quit. package name: (sass-compile-test) version: (1.0.0) description: entry point: (index.js) test command: git repository: keywords: author: license: (ISC) About to write to /****/sass-compile-test/package.json: { "name": "sass-compile-test", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" } Is this OK? (yes) yes
トップ階層に package.json ができていたら次のステップへ

2. Dart Sass install

npm install --save sass // dart sassのパッケージ名はsass
install後のpackage.json
An image from Notion

3. 書き出す場所、コンパイルオプションを指定する

ファイルの場合: sass <input.scss>:<output.css> フォルダの場合: sass <input/>:<output/> オプション  : sass <options> <input/>:<output/>
※ オプション一覧をページの最後に載せています。
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "compile-sass": "sass styles/sass:styles/css", "build": "sass --style=compressed --no-charset styles/sass:styles/css", "watch": "sass --watch styles/sass:styles/css" },

例) Wordpressサイト

"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "sass --style=compressed wp/wp-content/themes/[テーマ名]/[path-to-sass-folder]:wp/wp-content/themes/[テーマ名]", },

4. npm run で動かす

$ npm run watch // watchは ctrl + c で抜けられます $ npm run build

DartSassオプション

圧縮 + @charsetなし

"scripts": { "compile-sass": "sass --style=compressed --no-charset styles/sass:styles/css", },

変更を監視

"scripts": { "watch": "sass --watch styles/sass:styles/css" },

オプション一覧

Usage: sass <input.scss> [output.css] sass <input.scss>:<output.css> <input/>:<output/> <dir/> ━━━ Input and Output ━━━━━━━━━━━━━━━━━━━ --[no-]stdin Read the stylesheet from stdin. --[no-]indented Use the indented syntax for input from stdin. -I, --load-path=<PATH> A path to use when resolving imports. May be passed multiple times. -s, --style=<NAME> Output style. [expanded (default), compressed] --[no-]charset Emit a @charset or BOM for CSS with non-ASCII characters. (defaults to on) --[no-]error-css When an error occurs, emit a stylesheet describing it. Defaults to true when compiling to a file. --update Only compile out-of-date stylesheets. ━━━ Source Maps ━━━━━━━━━━━━━━━━━━━━━━━━ --[no-]source-map Whether to generate source maps. (defaults to on) --source-map-urls How to link from source maps to source files. [relative (default), absolute] --[no-]embed-sources Embed source file contents in source maps. --[no-]embed-source-map Embed source map contents in CSS. ━━━ Other ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ --watch Watch stylesheets and recompile when they change. --[no-]poll Manually check for changes rather than using a native watcher. Only valid with --watch. --[no-]stop-on-error Don't compile more files once an error is encountered. -i, --interactive Run an interactive SassScript shell. -c, --[no-]color Whether to use terminal colors for messages. --[no-]unicode Whether to use Unicode characters for messages. -q, --[no-]quiet Don't print warnings. --[no-]trace Print full Dart stack traces for exceptions. -h, --help Print this usage information. --version Print the version of Dart Sass.
npm
Dart Sass
コロのicon
コロ
飼い猫と食べ物のことを考えてたら1日が終わってます。Reactでいろいろ作りたい