elixir phoenix ユーザー画面と管理画面で CSS を分けてかつ Stylus を使う時の webpack.config.js の設定とディレクトリ構造のメモ

elixir phoenix は標準で webpack を使いますが CSS を1つのファイルにまとめる形式です。Stylus を使用する際のメモです

webpack.config.js のメモ

ユーザー画面と管理画面で CSS 2つのファイルを作成する部分と、stylus 部分を掲載します。

    module.exports = (env, options) => ({
      // ...
      entry: {
          app: ['./js/app.js'].concat(glob.sync('./vendor/**/*.js')),
          admin: ['./js/adminapp.js'].concat(glob.sync('./vendor/**/*.js'))
      },
      output: {
        filename: '[name].js',
        path: path.resolve(__dirname, '../priv/static/js')
      },
      module: {
        rules: [
          // ...
          {
            test: /.styl$/,
            use: [
                MiniCssExtractPlugin.loader,
                'css-loader',
                'stylus-loader'
            ]
          }
        ]
      },
      plugins: [
        new MiniCssExtractPlugin({ filename: '../css/[name].css' }),
        // ...
      ]
    });

package.json のメモ

stylus を読み込むための部分のみ掲載です。

      "devDependencies": {
        // ...
        "stylus": "^0.54.5",
        "stylus-loader": "^3.0.2",
        // ...
      }

ディレクトリ構造

    assets
    │  package-lock.json
    │  package.json
    │  webpack.config.js
    │
    ├─js
    │      adminapp.js
    │      app.js
    │      prism.js
    │      socket.js
    │
    ├─static
    │  │  favicon.ico
    │  │  robots.txt
    │  │
    │  └─images
    │      │  ...
    │
    └─styl
        │  adminapp.styl
        │  app.styl
        │
        ├─admin
        │  │  entry.styl
        │  │
        │  └─common
        │          base.styl
        │
        ├─common
        │      prism.styl
        │      reset.styl
        │
        └─user
            │  newindex.styl
            │
            ├─pc
            │  │  detail.styl
            │  │  index.styl
            │  │
            │  └─common
            │          base.styl
            │
            └─sp
                │  detail.styl
                │  index.styl
                │
                └─common
                        base.styl

app.styl

    @import './common/reset.styl'
    @import './common/prism.styl'

    @media screen and (max-width: 499px) {
      @import './user/sp/common/base.styl'
      @import './user/sp/*.styl'
    }

    @media screen and (min-width: 500px){
      @import './user/pc/common/base.styl'
      @import './user/pc/*.styl'
    }

adminapp.styl

    @import './common/reset.styl'

    @media screen and (min-width: 500px){
      @import './admin/common/base.styl'
      @import './admin/*.styl'
    }

templateのlayoutはユーザー画面と管理画面

ユーザー画面と管理画面ではlayoutファイルを分けているので、読み込むCSSも分けます。

ユーザー画面では以下のようにします。

    <link rel="stylesheet" href="<%= Routes.static_path(@conn, "/css/app.css") %>"/>

管理画面では以下のようにします。

    <link rel="stylesheet" href="<%= Routes.static_path(@conn, "/css/admin.css") %>"/>