スタイルを読み込む方法 (style-loader/CSS/Sass/SCSS) [Webpack]

スタイルを読み込む方法

参考：

webpack の Loader を試してみる – Qiita

なんとなくで理解しない Webpack の CSS 周辺 – Qiita

Webpack って CSS 周りの Loader がいっぱいあって分かりにくいので整理してみる – Qiita

Loading Styles | SurviveJS

Working with Webpack and CSS Loaders | TomasAlabes.me

スタイルを import する時にモジュールのパスとして resolve する

resolve.modules に設定されたパス内から探索する。

@import "~mdbootstrap/scss/mdb";

参考：

webpack で node_modules 配下の css を import するときの path にチルダを入れる | development log (makotottn.hatenablog.com)

Module Resolution | Webpack [Official]

resolve.modules | Webpack [Official]

What does a `~` tilde in a CSS `url()` do? – Stack Overflow

style-loader

参考：

style-loader | Webpack [Official]

webpack-contrib/style-loader: Style Loader

style-loader を使って stylesheet を require する – Qiita

singleton

参考：

Webpack loading CSS into individual <style> tags – Stack Overflow

resolve-url-loader

参考：

bholloway/resolve-url-loader: Webpack loader that resolves relative paths in url() statements based on the original source file – GitHub

resolve-url-loader – npm

webpack2 で font-awesome の scss が使えなかった → できた！- Qiita

stylus の import での background-image – Qiita

Bootstrap Sass & resolve-url-loader | SymfonyCasts

SASS url resolving · Issue #86 · bholloway/resolve-url-loader – GitHub

omit-tilde-webpack-plugin

参考：

bholloway/omit-tilde-webpack-plugin: Webpack plugin that allows module imports to omit a tilde – GitHub

omit-tilde-webpack-plugin – npm

読み込みの順序

参考：

CSS resolving order · Issue #215 · webpack/webpack – GitHub

source-map

参考：

Webpack’s style loader extracts css file into inline style tag · Issue #3329 · webpack/webpack – GitHub

Does not apply objectUrl for `<link>` tag when setting `sourceMap: true` · Issue #265 · webpack-contrib/style-loader – GitHub

convertToAbsoluteUrls

参考：

Webpack: How to get relative path in css sourcemap – Stack Overflow

importLoaders

インポートしたファイルに前段のローダーを幾つ適用するかの設定。postcss-loader のみを使用していれば 1、postcss-loader と sass-loader を使用していれば 2 を設定する。

参考：

importLoaders – webpack-contrib/css-loader – GitHub

localIdentName

参考：

Avoid hash collisions by default with random hashPrefix? · Issue #413 · webpack-contrib/css-loader – GitHub

sideEffects

参考：

Effectful imports should ignore sideEffects field · Issue #6571 · webpack/webpack – GitHub