Come includere un file css esterno utilizzando Webpack e Angular2?

Question

Sto cercando di aggiungere un riferimento esterno a un file CSS in Angular2 utilizzando Webpack. mio css è definito come

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

nel mio file webpack.config.js e posso caricare css bene quando si fa in una testa di un file dattiloscritto:

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

Tuttavia quando provo e caricare un file CSS in linea all'interno di un componente come in:

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

ottengo un errore di: ECCEZIONE: TypeError: s.replace non è una funzione

Ho anche cercato di caricare i CSS tramite:

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

ma non molta fortuna

ogni aiuto è apprezzato

riguarda

Sean

Answer 1

Che cosa ha fatto il trucco è stato quello di caricare css come testo non elaborato nel webpack.config.js

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

riguarda

Answer 2

ho postato una risposta per la domanda simile, spero che vi aiuterà con voi per capire come il styles/styleUrls opere in angular2. C'è un pezzo di codice che ho provato ad aggiungere css all'applicazione attraverso il tuo componente.

Load external css style into Angular 2 Component

Answer 3

Il mio attuale soluzione per WebPack 2 con angolare 2 per CSS o 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')] 
    }, 

Plugin:

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

E ora è possibile utilizzare il seguente nel componente

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

miei DevDependencies attuali sono:

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

Aggiornamento per Webpack 2.2.1 e extract-text-webpack-plugin 2.0.0-rc.3 qui la soluzione sopra non funziona più.

devdependencies addional

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

è necessario aggiungere un postcss.config.js nella root della vostra applicazione con il contenuto

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

e la nuova regola per SCSS è la seguente

{ 
    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

moduli si avrebbe bisogno di installare:

css-loaderstyle-loader e opzionale ma consigliatourl-loader

modifiche al webpack config (sviluppo) module: { loaders: [ // CSS { test: /\.css$/, loader: "style-loader!css-loader", }, /* rest of your loaders */ ]

Nel tuo file javascript principale includono il file css

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

Ora, nel caso di bootstrap, in particolare, si vuole ottenere errori come questo:

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 questo caso u necessario scaricare i file menzionati localmente e aggiungere questa voce al vostro config webpack (all'interno "loaders" sezione come il primo di cui sopra)

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

Questo è il motivo per cui u bisogno di installare url -loader ma è necessario solo se il tuo css si basa su altri file immagine/font.

Nota: A quanto pare per la produzione di usarlo è meglio usare una configurazione più complessa che coinvolgono ExtractTextPlugin fornita dal @squadwuschel

Ecco tutti i dettagli che potrebbe essere necessario https://webpack.github.io/docs/stylesheets.html