More than 5 years have passed since last update.

electron+babelのテンプレートを作ってみたその2(CSS周り)

Last updated at 2019-04-25Posted at 2016-03-05

その１でjs周りの設定をしたので今回はCSS周りを設定する
http://qiita.com/umema4/items/1250ad632204acbd684c

#どういう構成にするか

bootstrap5からはpostCSSに代わるらしいので基本方針はpostCSSを中心すえる
フロントにかかわる部分は基本webpackでまとめるのでpostcss-loaderを利用

jsファイルがあまりにでかい様であれば分割を考える

bootrap4はsassなのでbootstrapはgulp-sassでcssに変換。bootstrapはデフォルトで読み込ませるのでwebpackではまとめない

部分的に上書きする場合は必要なモジュールでstyle-loader/css-loaderでrequireする

bootstrap v4

flexboxを使いたいのでnode_modules/bootstrap/scssにあるboostrap-flexboxと同様のことをsrc/scssで行う
cssnanoでminifyしておく 110kbが90kb

button, cards, flexboxを確認

大丈夫そう

 .main {
   .card {
     width: 20rem;
   }
 }

styleをrequireして利用するjsから読み込むようにする
lolcal scopeを利用するとrequireしたjs内で有効なclassになるようなのでreact.jsとかと相性がよさそう

const style = require("style/useable!css!./style.css");

のような記述をするとunknown wordとエラーがでる.

const style = require("./style.css");

styleは定義したclassだけもっていてuse/unuse メソッドがない
何でこけているのかの深追いはしていない

まずはautoprefixer, precssを適用
cssnextとかも試しては見たい

lintは単独で回す or eslint併せてlintだけ回すとかしたいのでwebpackには入れない
gulp-stylelintで設定。ruleはsuit cssを適用
https://suitcss.github.io/