swchrm logs

妄想技術録

webpackでreset.cssをグローバルに読み込ませる方法 覚書

前提

モチベーション

Chromeでアプリの動作確認中にuser agent stylesheetの影響で共通フッターの左端8px隙間が空き、それを埋めたい。

f:id:swchrm:20190124073228p:plain
この左端
f:id:swchrm:20190124072327p:plain
デベロッパーツールでのuser agent stylesheetの様子

環境

  • macOS
  • Vue.jsのvue init webpack {project名}でプロジェクトを作成
  • npm インストール済み
  • css-loader インストール済み
  • webpack インストール済み

手順

  1. npm install --save reset.cssでreset.cssをインストール。
  2. webpack.base.config.jsのentryでreset.cssを読み込む。
  3. 実行中ならば一回サーバーを再起動して設定を読み込ませる。
  4. ページを再読込。
  5. 完成

手順2. の詳細(箇条書きの番号がバグるので記述を入れ替え)

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: [
      './node_modules/reset-css/reset.css',
      './src/main.js'
    ]
  },
  output: {
    (中略)
}

簡単な解説

既存のmain.jsの前で読み込むことで、本来適用させたいcssを書き込んだjsを読み込む前にリセットできる理解。 Vueのwebpack用テンプレートを利用して開始したためか今回はwebpack.base.config.jswebpack.dev.config.jswebpack.prod.config.jsの三種構成でwebpack.base.config.jsに手を加えた。 webpack.config.jsしかない場合は適宜読み替えて書き換えれば大丈夫なはず。

反省

モチベーションは特定の余分なスタイルシートの無効化だったが、案の定というべきか、無効化してほしくないスタイルシートまで無効化された。 特定のスタイルシートだけ無効化したい場合は別の方法を採用する必要がある。

参考情報

www.npmjs.com