Перемещение связанного css в другой каталог меняет префикс URL ../ только на / - PullRequest
Новая
       6

Перемещение связанного css в другой каталог меняет префикс URL ../ только на /

0 голосов
/ 22 мая 2018

Я пытаюсь настроить конфигурацию моего веб-пакета (, я впервые использую веб-пакет ) для многостраничного веб-сайта ( не SPA ).Все до сих пор идет хорошо, но пути URL для элементов в css не указывают на правильное назначение.

Я использую extract-text-webpack-plugin для создания отдельных css-пакетов и file-loader для загрузки изображений.

Проблема в том, что когда процесс сборки завершается, относительный URL в CSS, такой как ../assets/images/<hash>.png, изменяется на assets/images/<hash>.png, и, следовательно, изображение не отображается на странице.Но другие изображения, размещенные на html-странице с помощью тегов img , загружаются с assets/images/<hash>.png в качестве источника.

Следовательно, мой вопрос

  • как мне сохранить относительный путь внутри файла css?

Я действительно мог бы использовать некоторую помощь, так как это мой первый раз с веб-пакетом и провел несколько бессонных ночей, выясняя этомного.: (

Webpack.config.js 

const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const extractCSS = new ExtractTextPlugin("css/[name].styles.min.css");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");

const entryPoints = require("./app");

module.exports = {
    entry: entryPoints,
    output: {
        path: path.resolve(__dirname + "/dist"),
        filename: "js/[name].bundle.min.js",
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: [
                    {
                        loader: "babel-loader",
                        options: {
                            presets: ["es2015"]
                        }
                    }
                ],
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: extractCSS.extract({
                    fallback: "style-loader",
                    use: [
                        {
                            loader: "css-loader",
                            options: {
                                minimize: true,
                                sourceMap: true
                            }
                        },
                        "postcss-loader"
                    ]
                })
            },
            {
                test: /\.html$/,
                use: ["html-loader"]
            },
            {
                test: /\.(svg|gif|jpg|png)$/,
                use: [
                    {
                        loader: "file-loader",
                        options: {
                            outputPath: "assets/images/",
                            publicPath: "assets/images/"
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        extractCSS,
        new HtmlWebpackPlugin({
            filename: "index.html",
            template: "src/index.html",
            chunks: ["index"]
        }),
        new HtmlWebpackPlugin({
            filename: "page2.html",
            template: "src/page2.html",
            chunks: ["page2"]
        }),
        new CleanWebpackPlugin(["dist"])
    ]
};

Моя структура проекта выглядит следующим образом: 

Project
|
|__ dist
|     |__ assets
|     |       |__images
|     |             |__ image1-hash
|     |             |__ image2-hash
|     |             |__ image3-hash
|     |
|     |__ css
|     |    |_ index.styles.min.css
|     |    |_ page2.styles.min.css
|     |
|     |__ js
|     |    |_ index.bundle.min.js
|     |    |_ page2.bundle.min.js
|     |
|     |__ index.html
|     |__ page2.html
|
|__ node_modules
|

1 Ответ

0 голосов
/ 29 мая 2018

Попробуйте это, в качестве обходного пути, замените 

const extractCSS = new ExtractTextPlugin("css/[name].styles.min.css");

на 

const extractCSS = new ExtractTextPlugin("[name].styles.min.css");

Окончательное решение: 

        {
            test: /\.(svg|gif|jpg|png)$/,
            use: [
                {
                    loader: "file-loader",
                    options: {
                        outputPath: "assets/images/",
                        publicPath: "/assets/images/" // <- use absolute path
                    }
                }
            ]
        }
...