Sassフレームワーク Bourbonの使用方法がわからず困っています。
解決済
回答 2
投稿
- 評価
- クリップ 0
- VIEW 2,531
前提・実現したいこと
最近遅ればせながら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にはテストで以下のように記述しています。
@import "bourbon";
a{
color: blue;
background: transparent;
@include transition(.1s);
&:hover,{
background: blue;
}
}試したこと
エラー内容から「単純にbourbonを読み込めていない？」と考え、
@importするためのパスを以下のように変えてみたのですが
@import "dev/sass/bourbon";
そもそも
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
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
+1
node-bourbonのページの使い方をみると、gulpfileの内容にすこし手を入れる必要がありそうです。詳しくは以下のURLを参照してください。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
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を見ながら簡単に解決させられると思います。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 88.09%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
2016/09/11 13:58
こうやってパスを通すのですね、
usageを見ながら進めたところ無事解決しました・・・！