javascript - nesting - Webpack sass donde esta el archivo css

webpack css loader example

Question

Estoy usando un paquete web con sass loader como este:

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

Pero veo que los estilos se aplican a la etiqueta de estilo, ¿dónde está el archivo generar css?

Answer 1

De manera predeterminada, el cargador de estilo integra el CSS compilado en su paquete, que se agrega al encabezado de la página con el archivo de salida, por ejemplo, bundle.js . Usando el extract-text-webpack-plugin puede eliminar el CSS compilado del paquete y exportarlo a un archivo separado.

Primero, envuelva su cargador en el complemento:

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

Luego dígale al plugin cómo llamar al archivo que genera:

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

Incluya este archivo en su HTML normalmente.

Answer 2

Si desea un archivo CSS separado cuando usa Webpack, necesita usar el extract-text-webpack-plugin .