web-dev-qa-db-ja.com

Angular-cli Webpack 3rd part css files

angular-cli 1.0.0-beta.11-webpack.2に移動しました
迷惑なことはたくさんありますが、私が直面している最大の問題は、外部cssファイルに関するものです（おそらく問題が発生します） jsファイルも使用）。

私のプロジェクトでは Angular2 material が使用されており、menu componentにはoverlay.cssが必要です。 index.htmlに含める場合：

<link href="vendor/@angular2-material/core/overlay/overlay.css" rel="stylesheet">

そしてng serveまたはng buildの後に、distフォルダーにオーバーレイcssファイルがありません。

angular-cli githubには issue があります。私はそれが述べられている方法で正確にすべてを行いましたが、まだ機能していません。

assetsフォルダーとstyles.cssファイルを

  • src
  • src/app

私のangular-cli.jsonファイルは次のようになります：

{
  "project": {
    "version": "1.0.0-beta.11-webpack.2",
    "name": "cli-webstorm"
  },
  "apps": [
    {
      "root":"src",
      "assets":"assets",
      "main": "src/main.ts",
      "tsconfig": "src/tsconfig.json",
      "mobile": false,
      "styles": "styles.css",
      "environments": {
        "source": "environments/environment.ts",
        "prod": "environments/environment.prod.ts",
        "dev": "environments/environment.dev.ts"
      }
    }
  ],
  "addons": [],
  "packages": [],
  "e2e": {
    "protractor": {
      "config": "config/protractor.conf.js"
    }
  },
  "test": {
    "karma": {
      "config": "config/karma.conf.js"
    }
  },
  "defaults": {
    "prefix": "app",
    "sourceDir": "src",
    "styleExt": "css",
    "prefixInterfaces": false,
    "lazyRoutePrefix": "+"
  }
}

angular-cli webpackの利点を活用できるように、プロジェクトにライブラリcssファイル（第3部css）をどのように含めることができるかを質問したいと思います。

angularwebpackangular-cliangular2-material
9
Kosmonaft

あなたの答えは、angular-cli.jsonで利用可能な新しいstylesおよびscripts構成設定内にあります。 CSSインジェクションを解決するには2つのオプションがあります。

外部スタイル

オプション1

次のように、CSSファイルへのパスをstyles配列に直接含めるだけです。

//-angular-cli.json-//

{
   //... 
 “apps”: [
   {
   //... 
   “styles”: [
     “styles.css”,
     “../node_modules/@angular2-material/core/overlay/overlay.css”
   ],
   “scripts”: [],

     // ...
    }
   }
 ],

オプション2

overlay.cssは、cliによって生成されたsrc/styles.cssファイルにインポートできます。

/* scr/styles.css */

@import "../node_modules/@angular2-material/core/overlay/overlay.css";

オプション2を使用する場合は、オプション1に示されているoverlay.cssへの参照を必ず削除してください。

注：angular-cli.jsonは構成ファイルであるため、サーバーに変更を加える場合はサーバーを再起動する必要があります。

さらにangular-cli 1.0.0-beta.11-webpack.2詳細はこちら を見つけることができます。

外部スクリプト

外部スタイルの挿入と同様に、angular-cli.jsonのscripts:[]配列を使用して外部スクリプトを挿入できます。ここに追加されたスクリプトは、windowオブジェクトに読み込まれます。これは、windowオブジェクトからjQueryにアクセスする必要があるプラグインで特に便利です。これについての詳細 ここ 。

"scripts": [
  "../node_modules/jquery/dist/jquery.js"
],
19
jboothe

1.0.0-beta.11-webpack.3以上にアップグレードする場合、apps[0].stylesのangular-cli.jsonプロパティを使用して、インポートする外部スタイルシートを一覧表示できます。

1.0.0-beta.11-webpack.2からアップグレードするには、次を実行：

npm uninstall -g angular-cli
npm cache clean
npm install -g [email protected]

注：[email protected]の実行中にSyntaxError: Unexpected token ...エラーが発生した場合、ng versionを機能させるにはNode.js 6が必要になることがあります。詳細は https://github.com/angular/angular-cli/issues/188 を参照してください。

新しいプロジェクトを生成する場合、angular-cli.jsonは次のようになります（stylesプロパティに注意してください）。

{
  "project": {
    "version": "1.0.0-beta.11-webpack.3",
    "name": "demo"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": "assets",
      "index": "index.html",
      "main": "main.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.json",
      "prefix": "app",
      "mobile": false,
      "styles": [
        "styles.css"
      ],
      "scripts": [],
      "environments": {
        "source": "environments/environment.ts",
        "prod": "environments/environment.prod.ts",
        "dev": "environments/environment.dev.ts"
      }
    }
  ],
  "addons": [],
  "packages": [],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "prefixInterfaces": false,
    "lazyRoutePrefix": "+"
  }
}
2
Mark Leong

Angular CLI Wikiストーリーページには "サードパーティインストール" セクションがあります：

ng new my-todo-app
ng install sass

また、ReadMeの Global Library Installation セクションも参照してください。

npm install bootstrap@next

次に、必要なスクリプトファイルをangular-cli.jsonのapps[0].scriptsに追加します。

"scripts": [
  "../node_modules/jquery/dist/jquery.js",
  "../node_modules/tether/dist/js/tether.js",
  "../node_modules/bootstrap/dist/js/bootstrap.js"
],

最後にBootstrap CSSをapps[0].styles配列に追加します：

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

実行している場合はng serveを再起動します。Bootstrap 4がアプリで動作しているはずです。

1
Mikeumus

それは私にとって、最終的には上手くいきます

[email protected]

そして

[email protected]

...両方ともローカルにインストール

npm install --save-dev

適切なバージョンの組み合わせは、それを機能させるための鍵でした。

0
Gernot Mojovsky

primefaces からPrimeNGをインポートするときにも同じ問題が発生しましたが、フォルダーにstyles.scssが見つかりました...

@import './../your_file_path/your_file_name';

トリックを行う必要があります

0
Bart Hoekstra

Tsファイルではなく、cssファイルをindex.htmlに含める必要があるとは思いません。あなたは単にこのようにあなたのCSSファイルにインポートを行うことができます

import "yourcssfile.css"

コンポーネントでのみ使用する場合は、styleUrlを使用できます

 styleUrls: ['yourfile.css']

angular2materialを含むAngular2 Webpackシード

0
Jorawar Singh