Help us understand the problem. What is going on with this article?

npmプロジェクトでBootstrapのインストールがハマっていたエラーと解決方法

More than 1 year has passed since last update.
 ERROR  Failed to compile with 1 errors                                 14:26:27

 error  in ./node_modules/bootstrap/dist/css/bootstrap.css

Module build failed: BrowserslistError: Unknown browser query `dead`
    at /Users/hogehoge/workspace/test/node_modules/browserslist/index.js:164:11

Bootstrap Vueが入らない!なんで?っていうツイートを先日見かけて、
そんなに難しいところあったっけ?と自分も Getting Started - BootstrapVue を試したところ、私もハマりました。
解決方法を調べて記事にしたためている間に直ってしまったようですがメモしておきます。

TL;DR

今ならnpm updateすると直ると思います

原因

問題が発生していたのは、2018年5月1日(Bootstrap v4.1.1)〜2018年7月25日(Bootstrap v4.1.3)の間。

ちなみにこのケースでハマるのは、下記の条件を満たすプロジェクトみたいです。
1.vue init webpack proj_name で作ったプロジェクト
2.上記期間に npm i bootstrap-vue している

他にも、Vue以外のプロジェクトでハマるのは、現象的に下記のケースかなと。
1.npmで管理している
2.browserlistをprojectで使っている
3.上記期間に npm i bootstrap している

Unknown browser query `dead` · Issue #26876 · twbs/bootstrap
Release v4.1.3 · twbs/bootstrap

  • 4.1.3
    • Fixed: Moved the browserslist config from our package.json to a separate file to avoid unintended inherited browser settings across npm projects.

とのことですので、Bootstrapのbrowserslistの設定と自分のプロジェクトの設定がコンフリクトすると起きるみたいです。

対策1

差し支えなければ npm update するとパッケージのバージョンが全部あたらしくなるので直るようです。

対策2

npm update すると差し支えがある場合は、productionビルド以外のcssのminimizeを止めれば大丈夫とのこと。

Vueのwebpackテンプレートで作ったプロジェクトだとこんな感じで、
css-loader と postcss-loader の minimize を止めてあげればいいみたいです。

build/util.js
前略 Line:18 くらいから
  const cssLoader = {
    loader: 'css-loader',
    options: {
      minimize: process.env.NODE_ENV === 'production', //←これを足す
      sourceMap: options.sourceMap
    }
  }

  const postcssLoader = {
    loader: 'postcss-loader',
    options: {
      minimize: process.env.NODE_ENV === 'production', //←これを足す
      sourceMap: options.sourceMap
    }
  }

参考

studist
「伝えることを、もっと簡単に」をミッションにビジュアルSOPマネジメントプラットフォームのBtoB SaaS「Teachme Biz」を開発・運営するスタートアップ
https://medium.com/studist-dev
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away