▷Ejemplo de webpack sass-loader ✔️ Foro Ayuda 【 2024 】

Carga un archivo Sass / SCSS y lo compila en CSS.

Empezando

Para comenzar, necesitará instalar sass-loader:

npm install sass-loader sass webpack --save-dev

sass-loader requiere que instales Dardo Sass o Node Sass por su cuenta (se puede encontrar más documentación a continuación).

Esto le permite controlar las versiones de todas sus dependencias y elegir qué implementación de Sass usar.

ℹ️ Recomendamos encarecidamente usar Dardo Sass.

⚠ Node Sass no funciona con Hilado PnP característica y no es compatible @use regla.

Encadena el sass-loader con css-loader y style-loader para aplicar inmediatamente todos los estilos al DOM o el mini-css-extract-plugin para extraerlo en un archivo separado.

Luego agregue el cargador a su configuración de Webpack. Por ejemplo:

app.js

import"./style.scss";

style.scss

$body-color: red;body color:$body-color;

webpack.config.js

module.exports =
  module:
    rules:[
        test:/.s[ac]ss$/i,
        use:[// Creates `style` nodes from JS strings"style-loader",// Translates CSS into CommonJS"css-loader",// Compiles Sass to CSS"sass-loader",],,],,;

Finalmente corre webpack a través de su método preferido.

Resolviendo `import` en las reglas

Webpack proporciona un mecanismo avanzado para resolver archivos.

los sass-loader utiliza la función de importador personalizado de Sass para pasar todas las consultas al motor de resolución de Webpack. Por lo tanto, puede importar sus módulos Sass desde node_modules.

@import"bootstrap";

Utilizando ~ está en desuso y se puede eliminar de su código (lo recomendamos), pero aún lo apoyamos por razones históricas. ¿Por qué puedes eliminarlo? El cargador primero intentará resolver @import como un camino relativo. Si no se puede resolver, el cargador intentará resolverlo. @import dentro node_modules.

Anteponer rutas de módulo con un ~ le dice a webpack que busque node_modules.

@import"~bootstrap";

Es importante anteponerlo solo con ~, porque ~/ se resuelve en el directorio de inicio. Webpack necesita distinguir entre bootstrap y ~bootstrap porque los archivos CSS y Sass no tienen una sintaxis especial para importar archivos relativos. Escribiendo @import "style.scss" es lo mismo que @import "./style.scss";

Problemas con `url(...)`

Dado que las implementaciones de Sass no proporcionan reescritura de URL, todos los activos vinculados deben ser relativos a la producción.

Si pasa el CSS generado al css-loader, todas las URL deben ser relativas al archivo de entrada (p. ej. main.scss).
Si solo está generando CSS sin pasarlo al css-loader, debe ser relativo a la raíz de su web.

Este primer problema lo interrumpirá. Es natural esperar que las referencias relativas se resuelvan contra el .sass/.scss archivo en el que se especifican (como en regular .css archivos).

Afortunadamente, hay dos soluciones a este problema:

Agregue la reescritura de la URL que falta usando el resolve-url-loader. Colóquelo antes sass-loader en la cadena del cargador.
Los autores de bibliotecas suelen proporcionar una variable para modificar la ruta del activo. bootstrap-sass por ejemplo tiene un $icon-font-path.

Opciones

Nombre	Escribe	Defecto	Descripción
`implementation`	`Object`	`sass`	Configure la implementación de Sass para usar.
`sassOptions`	`Object`	valores predeterminados para la implementación de Sass	Opciones para Sass.
`sourceMap`	`Boolean`	`compiler.devtool`	Habilita / deshabilita la generación de mapas de origen.
`additionalData`	`String`	`undefined`	Antepone / anexa `Sass`/`SCSS` código antes del archivo de entrada real.
`webpackImporter`	`Boolean`	`true`	Habilita / deshabilita el importador de paquetes web predeterminado.

`implementation`

Escribe: Object Defecto: sass

El especial implementation La opción determina qué implementación de Sass usar.

De forma predeterminada, el cargador resuelve la implementación en función de sus dependencias. Simplemente agregue la implementación requerida a package.json (sass o node-sass paquete) e instalar dependencias.

Ejemplo donde el sass-loader cargador utiliza el sass (dart-sass) implementación:

package.json

"devDependencies":"sass-loader":"^7.2.0","sass":"^1.22.10"

Ejemplo donde el sass-loader cargador utiliza el node-sass implementación:

package.json

"devDependencies":"sass-loader":"^7.2.0","node-sass":"^5.0.0"

Cuidado con la situación cuando node-sass y sass ¡fueron instalados! Por defecto el sass-loader prefiere sass. Para evitar esta situación, puede utilizar el implementation opción.

los implementation opciones acepta sass (Dart Sass) o node-sass como módulo.

Por ejemplo, para usar Dart Sass, pasaría:

module.exports =
  module:
    rules:[
        test:/.s[ac]ss$/i,
        use:["style-loader","css-loader",
            loader:"sass-loader",
            options:// Prefer `dart-sass`
              implementation:require("sass"),,,],,],,;

Tenga en cuenta que al usar sass (Dart Sass), La compilación sincrónica es dos veces más rápida que la compilación asincrónica de forma predeterminada, debido a la sobrecarga de las devoluciones de llamada asincrónicas. Para evitar esta sobrecarga, puede utilizar el fibras package para llamar a importadores asincrónicos desde la ruta del código síncrono.

Inyectamos automáticamente el fibers paquete (configuración sassOptions.fiber) si es posible (es decir, necesita instalar el fibers paquete).

package.json

"devDependencies":"sass-loader":"^7.2.0","sass":"^1.22.10","fibers":"^4.0.1"

Puede deshabilitar la inyección automática del fibers paquete pasando un false valor para el sassOptions.fiber opción.

webpack.config.js

module.exports =
  module:
    rules:[
        test:/.s[ac]ss$/i,
        use:["style-loader","css-loader",
            loader:"sass-loader",
            options:
              implementation:require("sass"),
              sassOptions:
                fiber:false,,,,],,],,;

También puede pasar el fiber valor usando este código:

webpack.config.js

module.exports =
  module:
    rules:[
        test:/.s[ac]ss$/i,
        use:["style-loader","css-loader",
            loader:"sass-loader",
            options:
              implementation:require("sass"),
              sassOptions:
                fiber:require("fibers"),,,,],,],,;

`sassOptions`

Escribe: Object|Function Predeterminado: valores predeterminados para la implementación de Sass

Opciones para Dardo Sass o Node Sass implementación.

ℹ️ El indentedSyntax la opción tiene true valor para el sass extensión.

ℹ️ Opciones como data y file no están disponibles y se ignorarán.

ℹ Recomendamos no configurar el outFile, sourceMapContents, sourceMapEmbed, sourceMapRoot opciones porque sass-loader establece automáticamente estas opciones cuando el sourceMap la opción es true.

ℹ️ El acceso al contexto del cargador dentro del importador personalizado se puede hacer usando el this.webpackLoaderContext propiedad.

Hay una ligera diferencia entre sass (dart-sass) y node-sass opciones.

Consulte la documentación antes de usarlos:

Documentación de Dart Sass para todos los disponibles sass opciones.
Documentación de Node Sass para todos los disponibles node-sass opciones.

`Object`

Uso y objeto para la configuración de implementación de Sass.

webpack.config.js

module.exports =
  module:
    rules:[
        test:/.s[ac]ss$/i,
        use:["style-loader","css-loader",
            loader:"sass-loader",
            options:
              sassOptions:
                indentWidth:4,
                includePaths:["absolute/path/a","absolute/path/b"],,,,],,],,;

`Function`

Permite configurar la implementación de Sass configurando diferentes opciones según el contexto del cargador.

module.exports =
  module:
    rules:[
        test:/.s[ac]ss$/i,
        use:["style-loader","css-loader",
            loader:"sass-loader",
            options:sassOptions:(loaderContext)=>// More information about available properties https://webpack.js.org/api/loaders/const resourcePath, rootContext = loaderContext;const relativePath = path.relative(rootContext, resourcePath);if(relativePath ==="styles/foo.scss")return
                    includePaths:["absolute/path/c","absolute/path/d"],;return
                  includePaths:["absolute/path/a","absolute/path/b"],;,,,],,],,;

`sourceMap`

Escribe: Boolean Predeterminado: depende de la compiler.devtool valor

Habilita / deshabilita la generación de mapas de origen.

Por defecto, la generación de mapas de origen depende de la devtool opción. Todos los valores permiten la generación de mapas de origen excepto eval y false valor.

ℹ Si un true los sourceMap, sourceMapRoot, sourceMapEmbed, sourceMapContents y omitSourceMapUrl de sassOptions será ignorado.

webpack.config.js

module.exports =
  module:
    rules:[
        test:/.s[ac]ss$/i,
        use:["style-loader",
            loader:"css-loader",
            options:
              sourceMap:true,,,
            loader:"sass-loader",
            options:
              sourceMap:true,,,],,],,;

ℹ En algunos casos raros node-sass puede generar mapas de origen no válidos (es un node-sass insecto).

Para evitar esto, puede intentar actualizar node-sass a la última versión o puede intentar establecer dentro sassOptions los outputStyle opción a compressed.

webpack.config.js

module.exports =
  module:
    rules:[
        test:/.s[ac]ss$/i,
        use:["style-loader","css-loader",
            loader:"sass-loader",
            options:
              sourceMap:true,
              sassOptions:
                outputStyle:"compressed",,,,],,],,;

`additionalData`

Escribe: String|Function Defecto: undefined

Antepone Sass/SCSS código antes del archivo de entrada real. En este caso, el sass-loader no anulará el data opción pero solo anteponer el contenido de la entrada.

Esto es especialmente útil cuando algunas de sus variables Sass dependen del entorno:

`String`

module.exports =
  module:
    rules:[
        test:/.s[ac]ss$/i,
        use:["style-loader","css-loader",
            loader:"sass-loader",
            options:
              additionalData:"$env: "+ process.env.NODE_ENV+";",,,],,],,;

`Function`

Sincronizar

module.exports =
  module:
    rules:[
        test:/.s[ac]ss$/i,
        use:["style-loader","css-loader",
            loader:"sass-loader",
            options:additionalData:(content, loaderContext)=>// More information about available properties https://webpack.js.org/api/loaders/const resourcePath, rootContext = loaderContext;const relativePath = path.relative(rootContext, resourcePath);if(relativePath ==="styles/foo.scss")return"$value: 100px;"+ content;return"$value: 200px;"+ content;,,,],,],,;

Asíncrono

module.exports =
  module:
    rules:[
        test:/.s[ac]ss$/i,
        use:["style-loader","css-loader",
            loader:"sass-loader",
            options:additionalData:async(content, loaderContext)=>// More information about available properties https://webpack.js.org/api/loaders/const resourcePath, rootContext = loaderContext;const relativePath = path.relative(rootContext, resourcePath);if(relativePath ==="styles/foo.scss")return"$value: 100px;"+ content;return"$value: 200px;"+ content;,,,],,],,;

`webpackImporter`

Escribe: Boolean Defecto: true

Habilita / deshabilita el importador de paquetes web predeterminado.

Esto puede mejorar el rendimiento en algunos casos. Úselo con precaución porque los alias y @import en-reglas que comienzan con ~ no trabajará. Puedes pasar el propio importer para resolver esto (ver importer docs).

webpack.config.js

module.exports =
  module:
    rules:[
        test:/.s[ac]ss$/i,
        use:["style-loader","css-loader",
            loader:"sass-loader",
            options:
              webpackImporter:false,,,],,],,;

Ejemplos de

Extrae CSS en archivos separados

Para las compilaciones de producción, se recomienda extraer el CSS de su paquete para poder usar la carga paralela de recursos CSS / JS más adelante.

Hay dos posibilidades para extraer una hoja de estilo del paquete:

mini-css-extract-plugin
cargador de extracción (más simple, pero especializado en la salida de css-loader)

webpack.config.js

const MiniCssExtractPlugin =require("mini-css-extract-plugin");

module.exports =
  module:
    rules:[
        test:/.s[ac]ss$/i,
        use:[// fallback to style-loader in development
          process.env.NODE_ENV!=="production"?"style-loader": MiniCssExtractPlugin.loader,"css-loader","sass-loader",],,],,
  plugins:[newMiniCssExtractPlugin(// Options similar to the same options in webpackOptions.output// both options are optional
      filename:"[name].css",
      chunkFilename:"[id].css",),],;

Mapas de origen

Habilita / deshabilita la generación de mapas de origen.

Para habilitar los mapas de origen CSS, deberá pasar el sourceMap opción a la sass-loadery el cargador de CSS.

webpack.config.js

module.exports =
  devtool:"source-map",// any "source-map"-like devtool is possible
  module:
    rules:[
        test:/.s[ac]ss$/i,
        use:["style-loader",
            loader:"css-loader",
            options:
              sourceMap:true,,,
            loader:"sass-loader",
            options:
              sourceMap:true,,,],,],,;

Si desea editar los archivos Sass originales dentro de Chrome, hay una buena publicación en el blog. Verificar test / sourceMap para un ejemplo de ejecución.

Contribuyendo

Tómese un momento para leer nuestras pautas de contribución si aún no lo ha hecho.

CONTRIBUYENDO

Licencia

MIT

Si entiendes que ha resultado de utilidad nuestro artículo, sería de mucha ayuda si lo compartes con más juniors así contrubuyes a extender esta información.

¡Haz clic para puntuar esta entrada!

(Votos: 0 Promedio: 0)

Tags : Webpack Loaders /

Ejemplo de webpack sass-loader

Empezando

Resolviendo `import` en las reglas

Problemas con `url(...)`

Opciones

`implementation`

`sassOptions`

`Object`

`Function`

`sourceMap`

`additionalData`

`String`

`Function`

Sincronizar

Asíncrono

`webpackImporter`

Ejemplos de

Extrae CSS en archivos separados

Mapas de origen

Contribuyendo

Licencia

Utiliza Nuestro Buscador

Preguntas Relacionadas:

Empezando

Resolviendo import en las reglas

Problemas con url(...)

Opciones

implementation

sassOptions

Object

Function

sourceMap

additionalData

String

Function

Sincronizar

Asíncrono

webpackImporter

Ejemplos de

Extrae CSS en archivos separados

Mapas de origen

Contribuyendo

Licencia

Utiliza Nuestro Buscador

Preguntas Relacionadas:

Resolviendo `import` en las reglas

Problemas con `url(...)`

`implementation`

`sassOptions`

`Object`

`Function`

`sourceMap`

`additionalData`

`String`

`Function`

`webpackImporter`