web-dev-qa-db-fra.com

Webpack 4: mini-css-extract-plugin + chargeur de fichiers ne chargeant pas les ressources

J'essaie de déplacer les éléments (images et polices) utilisés dans l'un de mes .scssfichiers, mais il semble qu'ils soient ignorés:

Voici mon fichier . Scss:

@font-face {
    font-family: 'myfont';
    src: url('../../assets/fonts/myfont.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

body {
    color: red;
    font-family: 'myfont';
    background: url('../../assets/images/bg.jpg');
}

Et voici mon webpack.config.js:

const path = require('path');
const { CheckerPlugin } = require('awesome-TypeScript-loader');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    target: 'node',
    entry: path.resolve(__dirname, 'server.tsx'),
    output: {
        filename: 'server_bundle.js',
        path: path.resolve(__dirname, 'build'),
        publicPath: '/build'
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js', '.jsx']
    },
    module: {
        rules: [{
                test: /\.(tsx|ts)?$/,
                loader: 'awesome-TypeScript-loader',
                options: {
                    jsx: 'react'
                }
            },
            {
                test: /\.(scss|sass|css)$/,                
                use: [
                    MiniCssExtractPlugin.loader,
                    { loader: 'css-loader', options: { url: false, sourceMap: true } },
                    { loader: 'sass-loader', options: { sourceMap: true } },                    
                ]
            },
            {
                test: /\.(png|svg|jpg|jpeg|gif)$/,
                loader: 'file-loader',
                options: { outputPath: 'public/images' }
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                loader: 'file-loader',
                options: { outputPath: 'public/fonts' }
            }
        ]
    },
    plugins: [
        new CheckerPlugin(),
        new MiniCssExtractPlugin({
            filename: 'public/styles_bundle.css',
            chunkFilename: "public/styles/[id].css"
        })
    ]
}

Je reçois ce fichier . Css dans mon navigateur en tant que sortie (Notez le nom de l'image):

body {
  color: red;
  background: url("../../assets/images/myimage.jpg"); 
}

Et dans mon répertoire public j'obtiens ceci:

public/
    styles_bundle.css

Ici, nous avons deux problèmes:

  1. Les polices ne sont pas compilées (Pas de public/polices/etc ...)
  2. Les images ne sont pas compilées

J'ai tout essayé, mais je ne sais pas ce qui peut se passer ici ... Des idées?

csswebpacksasswebpack-4mini-css-extract-plugin
10
danielrvt

Je viens de résoudre un problème similaire. Si vous modifiez l'option url sur true, vous risquez de voir des références d'URL d'image échouées.

{ loader: 'css-loader', options: { url: false, sourceMap: true } },

Ou vous pouvez vérifier manuellement si la référence de chemin est correcte.

url('../../assets/images/bg.jpg')

Je pense que le dossier d'images n'est pas créé car tous les liens de ressource d'image sont incorrects.

Pour le problème que je résolvais, les références étaient toutes fausses et je ne pouvais pas les résoudre, alors j'ai juste utilisé cela plugin de copie webpack pour copier les fichiers au bon emplacement du dossier dist.

1
Sheng

vous avez besoin d'un chargeur d'url

           {
               test: /\.(jpg|png|gif|woff|eot|ttf|svg)/,
                use: {
                    loader: 'url-loader', // this need file-loader
                    options: {
                        limit: 50000

                    }
                }
           }
0
David Zambrano