Zenn
📎

postcss.config.jsにpostcss-import-alias-resolverを追加する

2022/05/18に公開
CSS
Next.js
webpack
tech

はじめに

postcssのcss間のファイルのインポートにおいて、aliasを使用する。
(例) color.cssをhogepage.cssからインポートする。

ツール概要

postcss-import-alias-resolverはpostcss-importにおいてエイリアスの機能を使用するツール。
ツールの製作者は、既にあるpostcssのエイリアスをサポートしているツールでは解決できない問題があり、こちらのツールを作ることになったのだそう。

install方法

npm i postcss-import-alias-resolver

webpack設定方法

const resolver = require('postcss-import-alias-resolver');
const postcssLoader = {
  loader: 'postcss-loader',
  options: {
    plugins: {
      'postcss-import': {
        resolve: resolver(options)
      }
    }
  }
}

postcss.config.js

実装中のアプリケーションがnextjsだったこともあり、
postcssの設定はpost.config.jsに書いていたためwebpack.confを追加すべきか迷った。
結論、postcss.config.jsに書くことができた。
postcss-importのoptionとしてpostcss-import-alias-resolverを書いたら動いてくれた。

const path = require('path');
const resolver = require('postcss-import-alias-resolver');
module.exports = {
  plugins:
    [
      [
        'postcss-import',
        {
          resolve: resolver({
            alias: {
              '@': path.resolve(__dirname, 'src/assets')
            }
          })
        }
      ],
    ]
};

alias使用例

@import "~@/some.css";

プレフィックス

デフォルトで~がプレフィックスとして前についているが、こちらはオプションで削除可能。

dontPrefix: true, // デフォルトはfalse

参考
npmjs.com
Next.jsプロジェクトにStorybookを導入したときに困ったこと

Discussion