es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • La compilación de Font Awesome en Webpack añade un byte nulo \0 en una máquina, pero no en otras.

La compilación de Font Awesome en Webpack añade un byte nulo \0 en una máquina, pero no en otras.

20 Jul, 2023 Programación

Estamos incluyendo Font Awesome a través de:

$fa-font-path: "#{$asset-path}/../../project/assets/fonts/fontawesome";

@import "fontawesome/fontawesome";
@import "fontawesome/brands";
@import "fontawesome/solid";

en nuestros archivos SCSS de Shopware 6.

Hemos notado en algunas máquinas (estamos construyendo en el servidor) que el archivo CSS generado contiene bytes nulos “\0”.

.fa-certificate:before {
    content: "\0";
}

lo cual resulta en una salida como esta:

Nullbyte

Shopware utiliza webpack para construir el archivo CSS a partir de SCSS.

¿Cuál puede ser la razón de este “\0” adicional?

Hemos visto este enlace pero agregar

@charset "UTF-8";

al principio del archivo CSS no ayuda.

Cuando copiamos el archivo construido de una máquina a otra, funciona. Por lo tanto, no parece ser un problema al servir el CSS por el servidor, sino durante el proceso de construcción.

EDICIÓN: Investigando más a fondo:

En el SCSS de fontawesome hay:

$fa-var-certificate: \f0a3;

...

.#{$fa-css-prefix}-certificate:before { content: fa-content($fa-var-certificate); }

// Función de conveniencia utilizada para establecer la propiedad de contenido
@function fa-content($fa-var) {
  @return unquote("\"#{ $fa-var }\"");
}

Unquote es una función de sass – No sé de dónde sale el “\0”.

EDIT2: Comparamos el archivo vendor/shopware/storefront/Resources/app/storefront/package-lock.json en ambas máquinas y son idénticos, por lo que debería estar utilizando el mismo paquete de nodos, solo una versión ligeramente diferente de nodo (local: v14.18.2, servidor: v14.18.1). Aún así, el problema no se reproduce localmente.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El byte nulo (\0) en el archivo CSS generado podría ser causado por un problema de codificación de caracteres durante el proceso de compilación. El uso de unquote() en el archivo SCSS de fontawesome es una función de Sass que evalúa la expresión de SassScript proporcionada, la convierte en una cadena y elimina las comillas. Es posible que esta función esté agregando el byte nulo.

    Una posible solución podría ser configurar explícitamente el conjunto de caracteres en la configuración de webpack para la generación del archivo CSS. Esto se puede hacer agregando el siguiente código al archivo webpack.config.js:

    module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              sourceMap: true
            }
          },
          {
            loader: 'postcss-loader'
          },
          {
            loader: 'sass-loader'
          }
        ]
      }
    ]
  },
  // ...
  plugins: [
    new webpack.LoaderOptionsPlugin({
      options: {
        customProperties: {},
        postcss: [
          autoprefixer()
        ],
        output: {
          path: path.join(__dirname, 'dist'),
          filename: '[name].bundle.js',
          publicPath: ''
        },
        sassLoader: {
          includePaths: [
            path.resolve(__dirname, 'node_modules')
          ]
        },
        charset: 'utf-8' // configurar explícitamente el conjunto de caracteres a UTF-8
      }
    })
  ]
};

    Esto establece explícitamente el conjunto de caracteres en UTF-8, lo que debería asegurar que el archivo CSS generado no contenga ningún byte nulo.

Comments are closed.