sassをcssにリアルタイム変換。npmを使ってオプション付きでコンパイルする方法。[Dart Sass]
ハウツー
コロ
環境確認
💡
node-sass, Lib-sassは非推奨になるので、この記事ではDart Sassを使用しています。
Node.jsのバージョン
node.jsがインストールされているか確認
$ node -v
階層構造
|-- index.html
`-- styles
|-- css
`-- sass
`-- style.scss
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
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
コロ
飼い猫と食べ物のことを考えてたら1日が終わってます。Reactでいろいろ作りたい