Webpack#

PhoenixはJavaScriptとCSSのバンドルにwebpackを採用している。

assets/css/app.scssはassets/js/app.jsで読み込まれ、 webpackでバンドルされ、priv/static/js/app.js, priv/static/css/app.cssとして出力される。

CSSの出力順序#

webpack.config.jsで設定されているMiniCssExtractPlugin.loaderのおかげで出力されるapp.cssは app.scssで記述した順に出力される

参考

{
test: /\.[s]?css$/,
       use: [
         MiniCssExtractPlugin.loader,
       'css-loader',
       'sass-loader',
       ],
}

ただし、これには例外があって、app.scss内でscssをimportすると順序はimport順にならない。

以下のような場合、cssの出力の後にscssが出力される。

/* This file is for your main application css. */
@import "../node_modules/bootstrap/scss/bootstrap.scss";
@import "./dashboard.css"; // こっちが先に出力される

以下のように書くと、記載された順序で出力される。

/* This file is for your main application css. */
@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
@import "./dashboard.css";

順序に依存しなければ考える必要のないことだけど、そうもいかなかったので、考えることを減らすためにapp.scss無いではcssのみをimportする方針とする。（自分ルール