webpackでreset.cssをグローバルに読み込ませる方法 覚書
前提
モチベーション
Chromeでアプリの動作確認中にuser agent stylesheetの影響で共通フッターの左端8px隙間が空き、それを埋めたい。
環境
- macOS
- Vue.jsの
vue init webpack {project名}
でプロジェクトを作成 - npm インストール済み
- css-loader インストール済み
- webpack インストール済み
手順
npm install --save reset.css
でreset.cssをインストール。webpack.base.config.js
のentryでreset.cssを読み込む。- 実行中ならば一回サーバーを再起動して設定を読み込ませる。
- ページを再読込。
- 完成
手順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.js
、webpack.dev.config.js
、webpack.prod.config.js
の三種構成でwebpack.base.config.js
に手を加えた。
webpack.config.js
しかない場合は適宜読み替えて書き換えれば大丈夫なはず。
反省
モチベーションは特定の余分なスタイルシートの無効化だったが、案の定というべきか、無効化してほしくないスタイルシートまで無効化された。 特定のスタイルシートだけ無効化したい場合は別の方法を採用する必要がある。