Wie fügt man eine externe CSS-Datei mit Webpack und Angular2 ein?

Question

Ich versuche, eine externe Referenz zu einer CSS-Datei in Angular2 mit Webpack hinzuzufügen. Meine CSS ist definiert als

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

in meiner webpack.config.js Datei und ich kann CSS einfach gut laden, wenn in einem Kopf einer Typoskript Datei tun:

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

aber wenn ich versuche, und laden Sie eine CSS-Datei inline in einer Komponente wie in: AUSNAHME:

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

ich einen Fehler von bekommen Typeerror: s.replace ist keine Funktion

Ich habe auch versucht, über CSS zu laden:

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

aber nicht viel Glück

jede Hilfe

geschätzt

Grüße

Sean

Answer 1

Was ist der Trick zu laden tat, war, css als Rohtext im webpack.config.js

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

Grüße

Answer 2

Ich habe eine Antwort auf die ähnliche Frage gestellt, ich hoffe, es mit Ihnen helfen, wie die styles/styleUrls Werke in angular2 zu verstehen. Es gibt ein Stück Code, den ich bewiesen habe, um CSS über die Komponente an die Anwendung anzuhängen.

Load external css style into Angular 2 Component

Answer 3

Meine aktuelle Lösung für WebPack 2 mit kantigem 2 für css oder SCSS Loader;

{ 
     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')] 
    }, 

Plugins:

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

Und jetzt können Sie die folgenden in Ihrer Komponente

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

meine aktuellen DevDependencies sind verwenden:

"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" 
} 

Update- für Webpack 2.2.1 und extract-text-webpack-plugin 2.0.0-rc.3 hier funktioniert die obige Lösung nicht mehr.

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", 

Sie benötigen einen postcss.config hinzuzufügen.js in der Wurzel Ihrer App mit dem Inhalt

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

und die neue Regel für SCSS wird die folgende

{ 
    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

Module würden Sie installieren müssen:

css-loaderstyle-loader und optional aber empfohlenurl-loader

Änderungen an Ihrem webpack config (Entwicklung) module: { loaders: [ // CSS { test: /\.css$/, loader: "style-loader!css-loader", }, /* rest of your loaders */ ]

In Ihrem Haupt-Javascript-Datei enthalten Ihre CSS-Datei

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

Jetzt bei Bootstrap insbesondere werden Sie Erhalten Sie Fehler wie folgt:

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

In diesem Fall müssen u die oben genannten Dateien lokal und fügen Sie diesen Eintrag, um Ihre webpack config (innen "loaders" Abschnitt wie die erste oben)

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

Aus diesem Grund u url installieren müssen zum Download -loader-Paket, aber es ist nur erforderlich, wenn Ihre CSS auf andere Bild/Schriftart-Dateien angewiesen ist.

Hinweis: offenbar für die Produktion verwenden es besser ist, einen komplizierteren Aufbau zu verwenden, die ExtractTextPlugin von @squadwuschel erwähnt beinhalten

Hier ist es, alle Details, die Sie https://webpack.github.io/docs/stylesheets.html