web-dev-qa-db-ja.com

angular2-cliは@multiスタイルのエラーを与えます

最近、angular2-cliの使用を開始し、新しいプロジェクトを作成しました。私はプロジェクトでbootstrapを使用したかったため、bootstrapをインストールしてから、bootstrap cssファイルを https://github.com/angular/angular-cli#global-library-installation ng serveを実行した後、次のエラーが表示されます。

マルチスタイルのエラーモジュールが見つかりません：エラー：「/ home/krishna/angular2_migrate/webui/node_modules」の「/home/krishna/angular2_migrate/webui/node_modules/bootstrap/dist/css/bootstrap.min.css」を解決できません/ angular-cli/models '@ multiスタイル

私は何を間違えていますか？

Angular2-cliバージョンに関する情報

krishna@Krishna:~/angular2_migrate/webui$ ng version
Could not start watchman; falling back to NodeWatcher for file system events.
Visit http://ember-cli.com/user-guide/#watchman for more info.
angular-cli: 1.0.0-beta.17
node: 4.4.3
os: linux x64
cssangularstylesangular2-cli
13
codestruggle

パスの前に../を追加します。

Angular-cli.jsonでは、

"styles": [
  "../node_modules/bootstrap/dist/css/bootstrap.min.css",
  "styles.scss"
]

更新

Angular7では、angle.jsonファイルがあり、パスの前に../を追加する必要はありません

18
Noopur Dabhi

Angular 7では、ファイルは「angular.json」と呼ばれます。

「スタイル」オプションに適切な拡張子が設定されていることを確認してください。私の場合、SCSSオプションを指定したAngular CLIをインストールしましたが、デフォルトでは拡張機能がSASSとして設定されていました。

       "styles": [
          "src/styles.scss" // default was: src/styles.sass
        ],

enter image description here

8
atfede

私はAngular 6を使用しているため、ファイル名はangular.json、しかし私はそれが求めていた「../」パスを削除することで同様の問題を解決することができた。以下に、bootstrapとjqueryをmy angular app。

   "styles": [
          "src/styles.css",
          "node_modules/bootstrap/dist/css/bootstrap.css"
        ],
        "scripts": ["../node_modules/jquery/dist/jquery.js",
          "node_modules/bootstrap/dist/js/bootstrap.bundle.js"
      ]

注：jquery iでは "../"が必要でしたが、bootstapでは必要ありませんでした。

私が抱えていた問題に基づいた代替：

    "styles": [
          "src/styles.css", 
          "../node_modules/bootstrap/dist/css/bootstrap.css"
       ],
    "scripts": [
          "../node_modules/jquery/dist/jquery.js", 
          "../node_modules/bootstrap/dist/js/bootstrap.bundle.js"
      ]

また、この記事には、設定に関する複数の代替オプションがあります。

https://medium.com/@rogercodes1/intro-to-angular-and-how-to-setup-your-first-angular-app-b36c9c3ab6ca

5
Roger Perez

"./node_modules/bootstrap/dist/css/bootstrap.min.css"ではなく"../node_modules/bootstrap/dist/css/bootstrap.min.css"のようなパスを指定します

"styles": 
[
    "./node_modules/bootstrap/dist/css/bootstrap.min.css",
    "src/styles.css"
]
2
Sundeep

Angular.jsonに移動します

スタイルに移動し、bootstrap.min.cssの別のエントリを追加します

enter image description here

1
suraj garla

私の場合、エラーは私が持っていたためでした

    "styles":[
      "styles.css"
    ]

私の.angular-cli.jsonで

私はすべてのスクリプトとCSSのパスを手動で入力して解決しました..i.e

    "styles":[
      "styles/bootstrap.scss",
      "styles/app.scss",
     ]

Angular-cli.jsonのパスは、プロジェクトのルート（通常はsrc /）からの相対パスです。たとえば、src/styles.cssファイルがありますが、angular-cli.jsonではstyles.cssとしてのみリストされています。

1
Felix Runye

「../node_modules/bootstrap/dist/css/bootstrap.min.css」のような「../node_modules/bootstrap/dist/css/bootstrap.min.css」のようなパスを指定しないでください

"styles": 
[
    "./node_modules/bootstrap/dist/css/bootstrap.min.css",
    "src/styles.css"
]
1
Sundeep

ここに私のための修正があります。現在のディレクトリで、.angular-cli.jsonという隠しファイルを開いて、「style.sass」を「style.css：ng buildを実行する」に変更すると完了です。

前： - enter image description here AFTER： enter image description here

0
grepit

Primengの​​インストール後、angular 7で同じエラーが発生しました

Angular.jsonファイルのパスから./を削除し、「src/styles.css」から「src/styles.scss」に名前を変更します。

0
user2053483

bootstrap 4.0：にバグがあるように見えるので、以下の解決策は私のために働いた

npm uninstall bootstrap --save

次にインストールする

npm install [email protected] --save
0
user2181047

私は同じ問題を抱えていましたが、次のようなファイルのフルパスを与えることでその問題を解決します"styles": [ "F:/Angular2Projects/Angular/myapp/node_modules/bootstrap/dist/css/bootstrap.min.css", "F:/Angular2Projects/Angular/my-app/src/styles.css" ],

0
jagdish khetre

次を{} angular.jsonファイルにコピーして貼り付ければ、完璧に機能するはずです。

 "styles": [
          "node_modules/bootstrap/dist/css/bootstrap.min.css",
          "src/styles.css" ],
0
Dholu

ファイルangle.jsonでは、styles.sassをstyles.scssに変更しました。

正常にビルドします

それはsrcフォルダに移動し、スタイルファイルの拡張子を見る

したがって、angle.jsonスタイルオブジェクトでそれを変更します

0
Ragesh D Antony

style.cssに以下のコードを追加するだけです

@import url('https://unpkg.com/[email protected]/dist/css/bootstrap.min.css');

それが役に立てば幸い

0
Yoshita Mahajan