Estoy usando un paquete web con un cargador sass 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 CSS generado?
De forma predeterminada, el cargador de estilos inserta el css compilado en su paquete, que se agrega al encabezado de la página con el archivo de salida, por ejemplo, bundle.js . Con el complemento 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 complemento cómo llamar al archivo que genera:
plugins: [ new ExtractTextPlugin("app.css") ]Incluya este archivo en su HTML normalmente.
Si desea un archivo CSS separado cuando usa Webpack, debe usar extract-text-webpack-plugin .
El complemento extract-text-webpack ha quedado obsoleto, debe usar mini-css-extract-plugin . Suponiendo que tiene sus estilos en css/app.scss , su archivo de entrada debería importarlo como de costumbre, como:
import 'css/app.scss';Agrega el complemento:
plugins: [new MiniCssExtractPlugin()]Y agregue el complemento a su cadena de carga:
{ test: /\.s[ac]ss$/i, use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'] } Cuando ejecuta webpack con esa configuración, terminará con un archivo app.css cargado en su HTML con una etiqueta similar a:
<link href="app.css" rel="stylesheet">