スタイルを読み込む方法

参考:

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

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 のみを使用していれば 1postcss-loadersass-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

タグ:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です