¿Cómo puedo cargar font-awesome utilizando SECS (SASS) en Webpack el uso de rutas relativas?

He font-awesome en mi carpeta node_modules así que trate de importación en mi main .secs archivo así:

@import "../../node_modules/font-awesome/scss/font-awesome.scss";

Pero Webpack de la paquetización de la compilación falla, me dice

Error: Cannot resolve 'file' or 'directory' ../fonts/fontawesome-webfont.eot 

porque la fuente-impresionante.secs archivo se refiere a una ruta de acceso relativa, ‘../fonts/’.

¿Cómo puedo saber secs \ webpack a @import otro archivo, y el uso que de la carpeta del archivo como la carpeta de inicio para que sus rutas de acceso relativas trabajo como se espera?

  • Yo no sé webpack, pero no se puede poner .eot en ../../node_modules/font-awesome/fonts/fontawesome-webfont.eot?
  • Yo podría hacer eso mediante la alteración de la fuente-impresionante archivo, pero luego me gustaría perder los cambios cada vez me actualización de mecanismo nacional de prevención, por lo que no es una opción.
  • webpack trabaja en conjunto express @Richard?
  • No, no utilizando express
  • Estoy utilizando el mecanismo nacional de prevención de font-awesome sass cargador. se utiliza uno diferente?
InformationsquelleAutor Richard | 2015-11-11

8 Kommentare

  1. 125

    Uso

    $fa-font-path: "~font-awesome/fonts";
    @import "~font-awesome/scss/font-awesome";

    donde el $fa-font-path variable se ve en font-awesome/scss/_variables.scss

    $fa-font-path: "../fonts" !default;

    Como se describe en este caso:
    http://fontawesome.io/get-started/

    • No funciona para mí, compilar, pero me acaba de llegar el rectángulo en mi sitio web… :/
    • Tuve el mío, como $fa-font-path: "font-awesome/fonts" – es decir, sin la tilde.
    • Podrías explicar un poco más precisamente en la que puedes editar qué? No entiendo esta respuesta
    • fueron capaces de obtener esta trabajando para usted? También, por favor marca este como la respuesta!
    • No, he usado mi respuesta en el momento.
  2. 27

    No parece ser de alguna manera a @importar los archivos que tienen sus propias rutas relativas en SECS \ SASS.

    Así que en vez me las arreglé para conseguir este a trabajar:

    • Importar la secs \ css font-awesome archivo en mi .js o .jsx archivos, no mis archivos de hoja de estilo:

      de importación 'font-awesome/secs/font-awesome.secs'; 
    • Agregar esto a mi webpack.archivo de configuración:

     módulo: 
    { 
    cargadores: 
    [ 
    {prueba: /\.js?$/, cargador: 'babel-cargador?cacheDirectory', excluir: /(node_modules|bower_components)/}, 
    {prueba: /\.jsx?$/, cargador: 'babel-cargador?cacheDirectory', excluir: /(node_modules|bower_components)/}, 
    {prueba: /\.secs?$/, cargadores: ['estilo-loader', 'css-loader', 'sass-loader']}, 
    {prueba: /\.svg(\?v=\d+\.\d+\.\d+)?$/, cargador: 'archivo-cargador?mimetype=image/svg+xml'}, 
    {prueba: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "archivo-cargador?mimetype=application/fuentes woff"}, 
    {prueba: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "archivo-cargador?mimetype=application/fuentes woff"}, 
    {prueba: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "archivo-cargador?mimetype=application/octet-stream"}, 
    {prueba: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "archivo-loader"}, 
    ] 
    } 
    
    • ¿Cómo manejar una fuente diferente camino? Me refiero a que la importación de la secs allí, pero usted puede cambiar la ruta de acceso a la fuente de los archivos, por ejemplo, si usted necesita para cambiar a la producción y las fuentes se encuentran en una carpeta diferente. Alguna idea? Eso es lo que tengo que hacer.
    • No tengo a la alteración de material para la producción. Me imagino que acababa de copiar todo lo de mi local de construir y dejar los caminos solos. De lo contrario, tal vez la mirada en el salida de webpack.config.js y ver si se puede cambiar las rutas. O simplemente añadir un post en el paso de generación en el paquete.json secuencias de comandos de la sección.
    • Consiguió trabajo. He cambiado la ruta de acceso para el cargador y ahora su carga de las fuentes de la ruta de acceso especificada.
    • Usted no necesita incluir la fuente-impresionante secs en el archivo de javascript. Usted todavía puede incluir en su secs, como establece la ruta de la fuente como user137794 sugiere, a continuación, actualizar el webpack.archivo de configuración de la cuenta para los tipos de fuentes, como usted sugiere.
    • Que la ngp se utiliza? Estoy usando el sass de fuente impresionante cargador y no tener éxito.
    • no te olvides de añadir *cargador de sufijo (los cargadores de .secs archivos). Dejando sin cargador sufijo no es más largo permitido. Verificar webpack.js.org/migrate/3/…

  3. 18

    Siguientes trabajó para mí:

    $fa-font-path: "~font-awesome/fonts";
    @import "~font-awesome/scss/font-awesome";

    Esta es la importación de la font-awesome & fuentes necesarias en el proyecto.
    Otro cambio es en webpack configuraciones de carga de fuentes utilizando file-loader.

    {
      test: /\.scss$/,
      loaders: ['style', 'css?sourceMap', 'sass'
      ],
    }, {
      test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)(\?.*$|$)/,
      loader: 'file'
    }
  4. 12

    Resuelve cambiando mi app.scss:

    @import '~font-awesome/scss/_variables.scss';
    $fa-font-path: "~font-awesome/fonts";
    @import '~font-awesome/scss/font-awesome.scss';

    De esta manera es útil para mantener las dependencias externas sin cambios y sin versión.

    • Usted podría evitar que las líneas 1 y usar !por defecto` en la línea 2 final.
    • Es una lástima que yo no puedo conseguir que funcione este método porque significaría que no tuve que cambiar el _variables.scss archivo cada vez que me vuelve a compilar el proyecto. No reemplazar $fa-font-path o cualquier otra variable para la que importa.. así que no estoy seguro de cómo fueron capaces de hacer it_
  5. 6

    Acabo de configurar la ruta en mi principal secs archivo y funciona :

    $fa-font-path: "../node_modules/font-awesome/fonts";
    @import '~font-awesome/scss/font-awesome.scss';
  6. 5

    Lo que funcionó para mí fue añadir resolve-url-loader y habilitar sourceMaps

    Ya he importado font-awesome en mi raíz .scss de archivo:

    @import "~font-awesome/scss/font-awesome";
    ...

    Esta raíz archivo se importa en mi main.js archivo define como Webpack del punto de entrada:

    import './scss/main.scss';
    ...

    Entonces mi final webpack módulo de reglas parece a lo siguiente:

     ...
     {
        test: /\.(sa|sc|c)ss$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          { loader: 'postcss-loader', options: { sourceMap: true }, },
          'resolve-url-loader',
          { loader: 'sass-loader', options: { sourceMap: true }, },
        ],
      }, {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: { limit: 1000, name: 'fonts/[name].[ext]', },
      }
      ...

    Nota:

    He utilizado mini-css-extract-plugin, que puede ser registrado como este:

    new MiniCssExtractPlugin({
        filename: 'css/main.css',
        chunkFilename: '[id].[hash]',
    }),

    url-loader requiere file-loader para ser instalado, así que si tienes un error como este: cannot find module file-loader, a continuación, sólo tienes que instalar:

    npm i -D file-loader

    Enlaces Útiles:

    https://github.com/webpack/webpack/issues/2771#issuecomment-277514138
    https://github.com/rails/webpacker/issues/384#issuecomment-301318904

  7. 0

    v. 4 (symofony 4 + webpack)

    $fa-font-path: "~components-font-awesome/webfonts";
    @import '~components-font-awesome/scss/fa-brands';
    @import '~components-font-awesome/scss/fa-regular';
    @import '~components-font-awesome/scss/fa-solid';
    @import '~components-font-awesome/scss/fontawesome';

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea