WebpackとAngular2を使用して外部CSSファイルを含めるにはどうすればよいですか？

Question

Webpackを使用してAngular2のCSSファイルへの外部参照を追加しようとしています。 私のCSSは私のwebpack.config.jsファイルに

{ test: /\.css$/, loader: "style-loader!css-loader" }, 

として定義され、typescriptファイルの頭の中でやったときに、私はちょうど罰金CSSを読み込むことができます。

require("./styles/style.css"); 

は、しかし、私は試してみて、以下のように部品内部のCSSファイルをインラインロード：EXCEPTION：

@Component({ 
selector: 'todo-list', 
template: ` 
      <section class="todoapp">     
      </section> 
`, 
styles: [require('./Todolist.css')], // <-------------- 
directives: [TodoItem], 
providers: [TodosService] 
... 

私はエラーを取得する例外TypeError：s.replaceが機能

ではありません

私も経由してCSSをロードしようとした：任意のヘルプは、トリックをロードするために何をしたの

よろしく

ショーン

Answer 1

を高く評価している

styles: [require('style-loader!css-loader!./Todolist.css')] 

ではなく、多くの幸運

webpack.config.jsの生テキストとしてのCSS。

{ 
    test: /\.css$/, 
    loader: 'raw!postcss' 
}, 

よろしく

Answer 2

私は同様の質問に対する答えを掲載しているが、私はそれがangular2でどのようにstyles/styleUrls作品を理解するためにあなたを助けることを願っています。あなたのコンポーネントを通してアプリケーションにCSSを追加することが証明されたコードがあります。

Load external css style into Angular 2 Component

Answer 3

CSSやSCSSローダーのための角度2とWebPACKの2のための私の現在のソリューション。

{ 
     test: /\.css$/, 
     loader: [ 
      ExtractTextPlugin.extract({ fallbackLoader: "style-loader", loader: 'css-loader' }), 
      'to-string-loader', 
      'css-loader' 
     ], 
     exclude: [helpers.root('Content')], 
     include: [helpers.root('App')] 
    }, 
    { 
     test: /\.scss$/, 
     loader: [ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: ['css-loader'] }), 
      'to-string-loader', 
      'css-loader', 
      'sass-loader' 
     ], 
     exclude: [helpers.root('Content')], 
     include: [helpers.root('App')] 
    }, 

プラグイン：

new ExtractTextPlugin({ filename: "[name].css" }), 

そして今、あなたは

@Component({ 
    selector: 'logmonitor', 
    styleUrls: ['./logmonitor.component.scss', './logmonitor.component.css'], 
    templateUrl: './logmonitor.component.html' 
}) 

私の現在のDevDependenciesがあるコンポーネントに次のように使用することができます。

"devDependencies": { 
    "@types/node": "6.0.51", 
    "angular2-template-loader": "0.6.0", 
    "awesome-typescript-loader": "2.2.4", 
    "css-loader": "0.26.1", 
    "css-to-string-loader": "0.1.2", 
    "file-loader": "0.9.0", 
    "url-loader": "0.5.7", 
    "html-loader": "0.4.4", 
    "svg-url-loader": "1.1.0", 
    "less": "2.7.1", 
    "less-loader": "2.2.3", 
    "node-sass": "3.13.0", 
    "sass-loader": "4.0.2", 
    "style-loader": "0.13.1", 
    "raw-loader": "0.5.1", 
    "to-string-loader": "1.1.5", 
    "clean-webpack-plugin": "0.1.4", 
    "extract-text-webpack-plugin": "2.0.0-beta.4", 
    "html-webpack-plugin": "2.21.0", 
    "webpack-notifier": "1.4.1", 
    "webpack": "2.1.0-beta.27", 
    "webpack-dev-middleware": "1.8.4", 
    "webpack-dev-server": "2.1.0-beta.12", 
    "webpack-md5-hash": "0.0.5", 
    "webpack-merge": "0.17.0", 
    "typescript": "2.0.10", 
    "typings": "2.0.0" 
} 

更新 for Webpack 2.2.1およびextract-text-webpack-plugin 2.0.0-rc.3ここで上記の解決策はもう機能していません。あなたがpostcss.configを追加する必要が

addional devdependencies

"extract-text-webpack-plugin": "2.0.0-rc.3", 
"postcss-loader": "1.3.0", 
"postcss-import": "9.1.0", 
"autoprefixer": "6.7.2", 
"webpack": "2.2.1", 

。コンテンツ

module.exports = { 
    plugins: [ 
     require('postcss-import')(), 
     require('autoprefixer')() 
    ] 
}; 

でのアプリのルートでJSとSCSSのための新しいルールは、インストールする必要があり、次の

{ 
    test: /\.scss$/, 
    loader: [ 
     { loader: 'raw-loader' }, 
     { loader: 'sass-loader', query: { sourceMaps: true } }, 
     { loader: 'postcss-loader' } 
    ], 
    exclude: [helpers.root('Content')], 
    include: [helpers.root('App')] 
} 

Answer 4

モジュールです：

css-loaderstyle-loaderとオプションですがお勧めします。url-loader

あなたのメインのJavaScriptファイルで、あなたのWebPACKの設定（開発）への変更 module: { loaders: [ // CSS { test: /\.css$/, loader: "style-loader!css-loader", }, /* rest of your loaders */ ]

CSSファイルが含まれ、特に今、ブートストラップの場合

import '../css/bootstrap.min.css';

あなたがします次のようなエラーが表示されます：

ERROR in ./~/css-loader!./client/css/bootstrap.min.css Module not found: Error: Cannot resolve module 'url-loader' @ ./~/css-loader!./client/css/bootstrap.min.css 6:3278-3330 6:3348-3400

ERROR in ./~/css-loader!./client/css/bootstrap.min.css Module not found: Error: Cannot resolve module 'url-loader' @ ./~/css-loader!./client/css/bootstrap.min.css 6:3449-3503

ERROR in ./~/css-loader!./client/css/bootstrap.min.css Module not found: Error: Cannot resolve module 'url-loader' @ ./~/css-loader!./client/css/bootstrap.min.css 6:3533-3586

uは（上記の最初のような "loaders"セクション内） ローカルに言及したファイルをダウンロードしてお使いのWebPACKの設定にこのエントリを追加する必要があります。その場合、

{ 
    test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/, 
    loader: 'url-loader', 
    options: { 
     limit: 10000 
    } 
}] 

uは、URLをインストールする必要がある理由はここにありますあなたのCSSが他のイメージ/フォントファイルに依存している場合にのみ必要です。

注： 生産はあなたが https://webpack.github.io/docs/stylesheets.html