質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Framework

Frameworkは、アプリケーションソフトを開発する際に、一般的な機能をより簡単に、より早く完了させる事を目的とした、ソフトウェアやライブラリのセットを指します。開発にフレームワークを使用する事で、追加で必要となる機能だけを開発するだけで済む為、開発効率の向上が見込めます。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

gulp

gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

Q&A

解決済

2回答

3533閲覧

Sassフレームワーク Bourbonの使用方法がわからず困っています。

tsgforce-bcnr33

総合スコア7

Framework

Frameworkは、アプリケーションソフトを開発する際に、一般的な機能をより簡単に、より早く完了させる事を目的とした、ソフトウェアやライブラリのセットを指します。開発にフレームワークを使用する事で、追加で必要となる機能だけを開発するだけで済む為、開発効率の向上が見込めます。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

gulp

gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

0グッド

0クリップ

投稿2016/09/10 16:19

###前提・実現したいこと
最近遅ればせながらsassを使い始めた者です。(gulp-sassでコンパイルしています)
コーディングのさらなる効率化を目指して
Bourbonの導入を考えたのですが、どうもうまくいきません。

通常のgulpのパッケージと同様に
プロジェクトのルートディレクトリで
"npm install node-bourbon--save dev"
とし、style.scssに@import bourbon;
とするだけでは使えないのでしょうか??

ちなみに他のgulpパッケージについては、
プロジェクトのルートディレクトリでnpm install → gulpfile.jsにタスクを追加
で問題なく動作しています。

開発環境の階層は以下のようになっています。

_source/(projectroot) ├ dev/ │ └sass/ │ └style.scss ├ htdocs/ │ └assets/ │ └css/ │ └style.css ├ node_modules/ └ gulpfile.js

###発生している問題・エラーメッセージ
コマンドプロンプトには以下のように表示されています。

Message: dev\sass\style.scss Error: File to import not found or unreadable: bourbon Parent style sheet: D:/work/clientname/brandname/_source/dev/sass/style.scss on line 12 of dev/sass/style.scss >> @import "bourbon";

###該当のソースコード
style.scssにはテストで以下のように記述しています。

scss

1@import "bourbon"; 2a{ 3 color: blue; 4 background: transparent; 5 @include transition(.1s); 6 &:hover,{ 7 background: blue; 8 } 9}

###試したこと
エラー内容から「単純にbourbonを読み込めていない?」と考え、
@importするためのパスを以下のように変えてみたのですが

scss

1 2@import "dev/sass/bourbon"; 3

そもそも
sassフォルダの中にbourbonのファイルらしきものも見当たらず。。。

package.jsonにも"node-bourbon": "^4.2.8",
の記述は入っているため、
インストール自体は問題なくされていると思うのですが。。。

ご存知の方がいらっしゃったなら、ご教示頂きたい次第です。

よろしくお願いいたします。

###補足情報(言語/FW/ツール等のバージョンなど)

それぞれのバージョンは以下のとおりです

npm 3.5.2
node v5.2.0

gulp 3.9.1
node-bourbon 4.2.8

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

node-bourbonのページの使い方をみると、gulpfileの内容にすこし手を入れる必要がありそうです。詳しくは以下のURLを参照してください。

npm ^ node-bourbon - Stylesheet usage

投稿2016/09/11 00:05

編集2016/09/11 00:07
yukkeorg

総合スコア985

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tsgforce-bcnr33

2016/09/11 04:58

ありがとうございます!! こうやってパスを通すのですね、 usageを見ながら進めたところ無事解決しました・・・!
guest

0

npm install node-bourbon--save dev

正確にはnpm install node-bourbon --save-devでしょうかね。
新しいパッケージを取り込むnpm installコマンドは以下の事をやってくれます。

  • package.jsonの依存ライブラリに書き込む(--save-devの効果)
  • npde_modulesフォルダを生成し、その中にインストールしたライブラリを格納する

一番重要な「sassにincludePathsの指定を行う事」がまだです。

この前提を知っていれば、
yukkeorgさんが貼り付けてくれたnode-bourbonのUsageを見ながら簡単に解決させられると思います。

投稿2016/09/11 01:21

miyabi-sun

総合スコア21158

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tsgforce-bcnr33

2016/09/11 04:59

ありがとうございます! usageを見て漸くパスの通し方がわかりました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問