[Smart-Z] React - sass導入

sass

sass導入

sass(Syntactically Awesome Style Sheets)は、CSS を便利に使えるように拡張した言語。

1. node-sassをインストールする。

npm install -S node-sass

2. package.jsonにsmartz.scss用のコンパイルコマンドを追加する。

{
  "scripts": {
    "compile-sass": "node-sass src/sass/smartz.scss src/css/smartz.css",
    "minify-sass": "node-sass src/sass/smartz.scss src/css/smartz.min.css --output-style compressed",
    "map-sass": "node-sass src/sass/smartz.scss src/css/smartz.css --source-map true"
  },
  ...
}

src/sass/smartz.scss

@import "variables";
@import "footers";

src/sass/_variables.scss

$primary-color:              #3472F7 !default;
$primary-bg:                 #3472F7 !default;
$primary-states-color:       #1D62F0 !default;

src/sass/_footers.scss

.footer{
    background-color: $primary-color;
}

3. コマンドを実行すると、cssファイルが生成される。

npm run compile-sass

src/css/smartz.css

.footer{
    background-color: #3472F7;
}