[B! sass][webpack] mttakaoのブックマーク

mttakao id:mttakao

sassとwebpackに関するmttakaoのブックマーク (3)

Webpackで Browsersync + Sassコンパイルを試す - aircolor memolog
GruntやGulpなどのタスクランナーツールでは一般的ですが、WebpackだけでBrowsersyncをベースにSassのコンパイルを試してみました。そもそもWebpackに触れるについては、当初はやや億劫でした（汗ローダーという仕組みについての理解不足、日本語ドキュメントの少なさ、そしてなんといっても大艦巨砲主義と揶揄されるようなオプションの多さが理由です。とにかく調べるのが大変そうなイメージでした。また本業がWebサイト制作メインなので、Gulpで十分なのでは？という気もしてます。しかし前々からES6の導入とvue.jsを使う上でベストな環境を構築したかったのと、Rebuild.fmと例の記事に触発されて腰を上げて調べてみようと思いました。準備 Webpackへの理解が圧倒的に足らないので自分なりに調査をするところから。大雑把なまとめとして、 Webpackはビルドツールで
mttakao 2017/08/01
webpack

gulp

sass

BrowserSync
リンク
Webpackを色々いじってみる2 - unsweets.log
この前の続き。 CSSをロードする style-loaderとcss-loaderを使うことでCSSをJavascript側でimportすると、requireしたCSSをhead内に挿入してくれるようになる。npm install --save-dev style-loader css-loaderでOK。 webpack.config.jsを以下のように設定する。 const config = { // 省略 module: { loaders: [ { test: /\.css$/, loader: 'style!css' } ] } };
mttakao 2017/06/12
sass

CSS

webpack

SCSS
リンク
npm + gulp + webpack でつくるES6/sass開発環境
最近はJavaScriptをES6で書いたり、cssをsassで書いたりするのが当たり前になってきました。そうなると必然的に必要になるのがビルド。ビルドの仕組みも充実してきていて、単にトランスパイルするだけでなく、構文チェックしたり圧縮したり、CSSスプライトをつくるようなことまでできたりします。で、このビルド環境、新規Project立ち上げる度に用意するのが面倒くさいので、自分用の雛形をつくりました。よかったら参考にしてみてください。ビルドの中身 ES6 → ブラウザで動かせるJavaScriptにする scssをcssにする jsとcssはそれぞれ結合して圧縮する(.min.js/.min.cssをつくる) 変更を検知して自動ビルドする雛形なので特別なことはしません。新しく何かつくりたいと思ったときにすぐに作れるようなビルド環境を用意するだけです。デバッグ用にトランスパイルしただ
mttakao 2017/06/09
gulp

webpack

sass

フロントエンド
リンク
1