IMUZA.com

Xserver<<WordPress(ConoHa)<<はてなブログ

ホーム / SASS / Sassインストール/gemアップデートでエラー、AddTrustExternalCARoot-2048.pem.がNot Found(解決)

Sassインストール/gemアップデートでエラー、AddTrustExternalCARoot-2048.pem.がNot Found(解決)

2016/10/31 SASS, WebTips, Windows, はてなブログ

CSS メタ言語 LESS は、Joomla!のテーマやはてなのサンプルテーマ「Boilerplate」でも使われてしますので、ここしばらく使っていたのですが、Bootstrap4 が Sass 一本になったということもありますので Sass を使ってみようと思います。環境は Windows10 です。

  • Ruby インストール
  • Ruby のバージョン確認や gem アップデートなど
  • SSL certificate エラーを解消する
  • Sass インストール、アップデート確認
  • Sass サンプルファイルでテストしてみる

Ruby インストール

まず Ruby をインストールする必要があります。

Ruby の公式のダウンロードの下の方のWindows版Rubyバイナリ「RubyInstaller」をクリックしますと、画像のサイトへ行きます。

OS に応じた最新版をダウンロードします。

インストーラを起動し進みますと、上の画面になりますので、「ruby の実行ファイルへ環境変数 PATH を設定する」と「.rb と.rbw ファイルを Ruby に関連づける」にチェックを入れてインストールを完了します。

Ruby のバージョン確認や gem アップデートなど

Ruby のバージョンを確認し、gem のアップデートをしましたらエラーがでてしまいました。

エラーログでググりますとたくさんヒットしますが、結局SSLの証明書が古いことが原因らしく、AddTrustExternalCARoot-2048.pemを入れ替えればいいようです。

解決法を紹介しているサイトのひとつ。
Windowsでgem installするとSSLエラーが出る場合の解決策 – Qiita

ところが、ファイルのリンクをクリックしても、Not Found ファイルがありません。

404: Not Found

SSL certificate エラーを解消する

ほんとにネットはありがたいもので、ググればすぐに解決法が見つかります。

AddTrustExternalCARoot-2048.pem が not found 。また証明書が更新されたらしい –rails – ミスターFのいろいろプログラミング

ソースはこちらですね。

SSL Certificate Update – RubyGems Guides

  1. まず、https://rubygems.org/downloads/rubygems-update-2.6.7.gemをダウンロード
    (注)https://rubygems.org/downloads/rubygems-update-2.6.8.gemをダウンロードすればアップデートの必要がなくなる(はず)。
  2. ダウンロードしたファイルを c:\ に置きます
  3. コマンドプロンプトを立ち上げ、次のように打っていきます
    もちろん打つコマンドは c:\> 以下の一行を3つで、続いて実行結果が表示されています
C:\>gem install --local C:\rubygems-update-2.6.7.gem
Successfully installed rubygems-update-2.6.7
Parsing documentation for rubygems-update-2.6.7
Installing ri documentation for rubygems-update-2.6.7
Done installing documentation for rubygems-update after 40 seconds
1 gem installed


C:\>update_rubygems --no-ri --no-rdoc
RubyGems 2.6.7 installed


=== 2.6.7 / 2016-09-26


Bug fixes:


(略)


RubyGems installed the following executables:
        C:/Ruby23-x64/bin/gem


C:\>gem uninstall rubygems-update -x
Removing update_rubygems
Successfully uninstalled rubygems-update-2.6.7


C:\>

これでエラーは解消したようです。

gem をアップデートします。画像では実行結果が切れていますが、無事終了し、バージョンを確認しますと2.6.8と表示されました。

Sass インストール、アップデート確認

gem install sassと打てば、Sass がインストールされます。パッケージ管理システムって便利でいいですね。コマンドはgemですが、RubyGems というライブラリーです。

Sass サンプルファイルでテストしてみる

拡張子は scss です。 style.scss

@charset "UTF-8";


/*
  サンプル http://sass-lang.com/guide
  コメント行 css ファイルに残ります
*/


$font-stack:    Helvetica, sans-serif;
$primary-color: #333;


// 変数、この行は css ファイルに残りません
body {
  font: 100% $font-stack;
  color: $primary-color;
}


// 入れ子
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }


  li { display: inline-block; }


  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

サンプルファイルをおいたフォルダに移動し、

C:\...>sass style.scss:style.css

と打ちますと、同じフォルダにstyle.cssが作成されます。

@charset "UTF-8";
/*
  サンプル http://sass-lang.com/guide
  コメント行 css ファイルに残ります
*/
body {
  font: 100% Helvetica, sans-serif;
  color: #333; }


nav ul {
  margin: 0;
  padding: 0;
  list-style: none; }
nav li {
  display: inline-block; }
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none; }


/*# sourceMappingURL=style.css.map */

OK ですね。

【Joomla!】 3.6.4 セキュリティリリース 直ちに更新すべきです
Sass/css ファイル作成自動化とクリック一発でコンパイル自動監視
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2023/03/21

WordPress:メール送信にGmailのSMTPを使う(プラグインなし)

2023/03/10

WordPress:サムネイル付き次の記事/前の記事

2023/02/28

Twitterシェアリンクはintent/tweetを使おう

2023/02/21

GoogleタグマネージャーとアナリティクスGA4

2023/02/8

WordPress:人気記事を直近の期間指定で表示する

最新記事を一覧で見る

よく読まれている記事

よく読まれている記事を一覧で見る

カテゴリー

  • はてなブログ214
  • WebTips109
  • javascript98
  • Joomla!88
  • Windows68
  • Wordpress65
  • CSS63
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Google34
  • Plamo33
  • はてなプラグイン25
  • php22
  • Node.js18
  • Ubuntu16
  • SASS16
  • laravel415
  • Chrome11
  • cms-style10
  • iPhone9
  • ConoHa WING6
  • Git入門6
  • genesis6
  • Python5
  • Android5
  • PC全般4
  • Facebook4
  • スマートフォン4
  • 静的サイトジェネレーター3
  • Firefox3
  • SSD3
  • Blankslate3
  • Docker3
  • Twitter2
  • GitHub2
  • Mactype2
  • はてなブクマ1
  • 映画1
  • youtube1
  • rails入門1
  • Xserver1

Footer

My Web Sites

  • @半径とことこ60分
  • そんなには褒めないよ。映画評
  • IMUZA.com
  • GitHub

Related Sites

  • WordPress公式
  • WordPress関数リファレンス
  • PHPマニュアル

Contact Us

  • お問い合わせフォーム
  • Twitter
  • Facebook
  • Feedly

Copyright © 2023 · IMUZA.com