web-dev-qa-db-ja.com

Webpack 4：mini-css-extract-plugin + file-loaderがアセットをロードしない

私の.scssfilesの1つで使用されているアセット（画像とフォント）を移動しようとしていますが、無視されているようです：

これは私の。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');
}

そして、これは私の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"
        })
    ]
}

私はこれを。cssファイルとしてブラウザに取得しています（画像の名前に注意してください）：

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

そして、私のpublicディレクトリで、これを取得します：

public/
    styles_bundle.css

ここには2つの問題があります。

  1. フォントはコンパイルされません（No public/fonts/etc ...）
  2. 画像はコンパイルされていません

私は何でもやってみましたが、ここで何が起こっているのかわかりません...何かアイデアはありますか？

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

同様の問題を修正しました。 urlオプションをtrueに変更すると、失敗した画像URL参照が表示される場合があります。

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

または、パス参照が正しいかどうかを手動で確認できます。

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

すべての画像リソースのリンクが正しくないため、画像フォルダが作成されないと思います。

私が修正していた問題について、参照がすべて間違っていて修正できなかったため、これを使用して webpack copy plugin を使用して、正しいdistフォルダーの場所にファイルをコピーしました。

1
Sheng

あなたはURLローダーが必要です

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

                    }
                }
           }
0
David Zambrano