Webpack sass où est le fichier css

Question

J'utilise un pack Web avec sass loader comme ceci:

module.exports = {
  module: {
    loaders: [
      {
        test: /\.scss$/,
        loader: "style!css!sass"
      }
    ]
  }
};

Mais je vois que les styles s’appliquent à la balise style, où se trouve le fichier generate css?

Answer 1

Par défaut, le chargeur de style insère le css compilé dans votre lot, ce qui l'a ajouté à l'en-tête de la page avec le fichier de sortie, par exemple. bundle.js. En utilisant le extract-text-webpack-plugin , vous pouvez supprimer le fichier CSS compilé de l'ensemble et l'exporter dans un fichier séparé.

D'abord, placez votre chargeur dans le plugin:

 loaders: [{
  test: /\.scss$/,
  loader: ExtractTextPlugin.extract(
    "style",
    "css!sass")
 }]
},

Ensuite, indiquez au plug-in comment appeler le fichier qu'il génère:

plugins: [
    new ExtractTextPlugin("app.css")
 ]

Incluez ce fichier dans votre code HTML normalement.

Answer 2

Si vous voulez un fichier CSS séparé lorsque vous utilisez Webpack, vous devez utiliser le plugin extract-text-webpack-plugin .