web-dev-qa-db-ja.com

NPMを介してbulmaをインストールした後、プロジェクトでどのように参照できますか

私は私のプロジェクトでブルマを引き込みました：

_$ npm install bulma
_

その後、私のページでどのように参照できますか。私は本当にnpmの使い方を知りませんので、教えてください。私は自分のjsでそれを参照する必要がありますか：_import bulma from 'bulma'_つまり、どこにあるのかわからない。

npmbulma
39
TheBAST

最終的なcssビルドはprojectName/node_modules/bulma/css/bulma.cssにあります。

Webpackなどのファイルローダーを使用している可能性があります。たとえば、Vueプロジェクトで、それがある場合は、インポート構文を使用できます。

import 'bulma/css/bulma.css'

あなたのjs内。これは、import [xyz from] 'xyz'がprojectName/node_modules/xyzを参照することで機能し、cssファイルの場合、それはそれと同じくらい簡単です！

インストールされていない場合は、クライアントに送信する方法を見つける必要があります。 projectName/node_modules/bulma/css/bulma.cssをファイルに、おそらくbulma.cssをassetsまたはpublicのいずれか、または使用するものにコピーし、cssファイルを取得するように取得します。 html内：<link rel="stylesheet" href="/bulma.css">

44
towc

CSSのみです。

BulmaはCSSフレームワークです。

したがって、index.html通常のCSSリンクのように：

<link rel="stylesheet" type="text/css" href="your/bulma/path/bulma.css />

編集：パッケージマネージャーbulmaを使用してnodejs環境を介してnpmをインストールしたため、node_modulesと呼ばれるディレクトリが必要です。 bulmaディレクトリ。

3
ricopo

それは本当に明らかではありません。 bulmaを取得するには、fontawesome5経由のnpm、最小作業深度（今のところ）は次のとおりです。

npm i -S bulma @fortawesome/fontawesome @fortawesome/fontawesome-free-solid

その後、次のように初期化する必要がありました。

import fontawesome from '@fortawesome/fontawesome'
import solid from '@fortawesome/fontawesome-free-solid'
import 'bulma/css/bulma.css'

fontawesome.library.add(solid)

詳細はここにあります： https://fontawesome.com/how-to-use/use-with-node-js

2
Darwin

@import "../node_modules/bulma/css/bulma.css";

プロジェクトのmain.cssファイルまたはそれに類似したものがある場合は、main.cssファイル内に上記の行を追加できます。これにより、npm経由でbulmaをインストールした後、プロジェクトのパスbulma.css内にあるデフォルトのnode_modules/bulma/css/ファイルがインポートされます。

注：この方法を選択した場合は、main.cssファイル（または同様のもの）を静的インポートとしてindex.html内に含める必要があります。そのためには、次のようなものが必要です。

<link rel="stylesheet" href="/css/main.css">

BulmaはCSSフレームワークであるため、これが好きです。スタイルシートを相互にリンクしたままにしておくのが最善だと思います。

1
nipunshakya

私はVueで同じ問題を抱えていましたが、最終的にはこのおかげで解決しました link 。Bulmaの場合は、実行するだけです：

$ npm install bulma

npm installの後、ファイルはnode_modulesフォルダーの下に配置する必要があります。

Bulmaの場合、node_modulesの下にbulmaフォルダーがあることを確認し、次のようにmain.jsファイルにbulma cssフレームワークをインポートできます：import "./../node_modules/bulma/css/bulma.css";

注： link にある場合でも、ブルマへの完全なパスを示唆している場合、これは@Omkarとしては良い習慣ではありません指摘したので、私は次のようにブルマをインポートすることになりました：import "bulma/css/bulma.css";

0
dnhyde