typescript - Cum să incluzi un fișier CSS extern folosind Webpack și Angular2?

Încerc să adaug o referință externă la un fișier CSS în Angular2 folosind Webpack. CSS-ul meu este definit ca

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

în fișierul meu webpack.config.js și pot încărca CSS fără probleme atunci când fac acest lucru în head-ul unui fișier TypeScript:

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

Totuși, când încerc să încarc un fișier CSS inline într-un component, așa cum este în:

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

Primește o eroare de: EXCEPTION: TypeError: s.replace nu este o funcție

Am încercat de asemenea să încarc CSS prin:

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

dar nu prea mult noroc

orice ajutor este apreciat

salutări

Sean

Răspuns #1

Ceea ce a funcționat a fost să încarc CSS-ul ca text brut în webpack.config.js

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

salutări

Răspunsul #2

Soluția mea actuală pentru WebPack 2 cu Angular 2 pentru loader-ul css sau scss;

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

Module complementare :

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

Și acum poți folosi următoarele în componenta ta

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

Dependențele mele Dev actuale sunt:

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

Actualizare pentru Webpack 2.2.1 și extract-text-webpack-plugin 2.0.0-rc.3 aici soluția de mai sus nu mai funcționează.

dependințe de dezvoltare suplimentare

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

trebuie să adaugi un fișier postcss.config.js în rădăcina aplicației tale cu conținutul

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

și regula nouă pentru scss este următoarea

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