2

Olá! Estou trabalhando com node+webpack+sass. Quando executo o script do wabpack, é feita a compilação do sass, o bundle dos arquivos js e o resultado é todo colocado no diretório build/. Ate ai sem mistério, o problema é que a estrutura dos arquivos fontes na pasta src/ é diferente da estrutura gerada na pasta build/. Em src/ eu tenho:

/src
---/fonts
---/html
---/images
---/scripts
---/styles

O arquivo sass que fica na pasta styles/core/ faz imports da fontawesome-free:

@import '~@fortawesome/fontawesome-free/scss/fontawesome.scss';
@import '~@fortawesome/fontawesome-free/scss/solid.scss';
@import '~@fortawesome/fontawesome-free/scss/regular.scss';

Quando a compilação é feita o webpack coloca tudo(css, js, html) na raiz de /build, e as fontes usadas no sass ele coloca em /build/fonts:

/build
--- /fonts
------ fonts files
--- css files
--- js files
--- html files

Então, eu criei um script que roda logo após a compilação do webpack para organizar tudo em pastas, ou seja:

/build
---/fonts
------ fonts files
---/css
------ .css files
---/js
------ .js files
---.html files

Apenas arquivos html ficam na raiz de /build. No caso das fontes não preciso fazer nada pois o próprio webpack já coloca as fontes em uma pasta /build/fonts/.

Agora vem o problema, os arquivos .css gerados da compilação do sass estão configurados para localizar as fontes em, por exemplo, fonts/any-font.ttf e não em ../fonts/any-font.ttf Perceberam? O compilador sass gera os relative paths .css para encontrar as fontes em fonts/ mas como meu script de pós-build organiza tudo em pastas, o caminho relativo fonts/ não funciona mais pois como os arquivos css foram movidos para a pasta /build/css o caminho relativo teria que ser ../fonts em não mais fonts/.

Eu consigo corrigir isso manualmente editando o css gerado, mas isso não é sustentável pois a cada compilação precisarei mudar os arquivos gerados manualmente.

Meu webpack.config.js:

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');

const SRSTY = "./src/styles/";
const SRJS = "./src/scripts/";

const IS_IN_PROD = false;

module.exports =
{
    mode: IS_IN_PROD ? 'production' : 'development',

    entry: {
        main: [`${SRJS}main.ts`, `${SRSTY}main.scss`]   // Todos os scripts e styles da página principal
    },

    devtool: 'source-map',

    output: {
        path: path.resolve(__dirname, './build'),
        filename: '[name].js'
    },

    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
    },

    module: {
        rules: [
            {
                test: /\.s[ac]ss$/i,
                use: [
                    {loader: MiniCssExtractPlugin.loader},
                    {loader: 'css-loader'}, 
                    {loader: 'resolve-url-loader'}, 
                    {loader: 'sass-loader'}
                ]
            },

            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            },
            {
                test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]',
                            outputPath: 'fonts/'
                        }
                    }
                ]
            }
        ]
    },

    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].css',
        }),
        new CopyPlugin({
            patterns: [
              { from: './src/html/main.html', to: 'main.html'},
            ]
        }),
    ],

    optimization: {
        minimize: IS_IN_PROD ? true : false,
        minimizer: [
            new TerserPlugin({
                test: /\.js(\?.*)?$/i,
                cache: true,
            }),
        ],
    },

}

Trecho do .css gerado pelo sass onde ele define o path para as fontes:

/*!
 * Font Awesome Free 5.13.0 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 */
@font-face {
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(fonts/fa-regular-400.eot);
  src: url(fonts/fa-regular-400.eot) format("embedded-opentype"), url(fonts/fa-regular-400.woff2) format("woff2"), url(fonts/fa-regular-400.woff) format("woff"), url(fonts/fa-regular-400.ttf) format("truetype"), url(fonts/fa-regular-400.svg) format("svg");
}

Como eu poderia "forçar" o sass para gerar essas url com um path específico?

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .