Разрешить URL () для изображения без упаковки - PullRequest
Новая
       47

Разрешить URL () для изображения без упаковки

0 голосов
/ 04 сентября 2018

Я интегрирую Webpack в уже установленную интерфейсную среду. Sass и resol-url-loader работают, и Webpack находит файлы, на которые ссылается url() в CSS. Моя проблема в том, что я не хочу копировать файлы, на которые ссылается url(), в папку dist /, я хочу ссылаться на них там, где они есть.

Мои файлы настроены так 

www/
  index.html
  assets/
    js/
      main.js
    css/
      main.scss
      components/
        thing.scss
    images/
      pic.jpg
  dist/
    output.js
    output.css

с main.scss, импортирующим thing.scss, который содержит строку

background: url(../../images/pic.jpg)

resol-url-loader правильно разрешает это значение ../images/pic.jpg, и css-loader находит файл, и вызывается загрузчик для файла (file-loader). Однако я не хотел бы копировать файл в dist / (что я сделал, добавив emitFile: false в загрузчик файлов) и переписать URL-адрес, чтобы он был относительным из вывода CSS (../assets/images/pic.jpg). Как мне это сделать?

Для справки, вот мой webpack.config.js 

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

{
    entry: './assets/js/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'output.js',
        publicPath: 'dist/'
    },
    module: {
        rules: [{
            test: /\.scss$/,
            use: [
                MiniCssExtractPlugin.loader, {
                    loader: "css-loader",
                    options: {
                        sourceMap: true,
                        url: false
                    }
                }, {
                    loader: "resolve-url-loader",
                    options: {
                        debug: true,
                        sourceMap: true
                    }

                }, {
                    loader: "sass-loader",
                    options: {
                        sourceMap: true,
                        sourceMapContents: false
                    }
                }
            ]
        }, {
            test: /\.(png|svg|jpg|gif)$/,
            use: [{
                loader: 'file-loader',
                options: {
                    emitFile: false
                }
            }]
        }]
    },
    plugins: [new MiniCssExtractPlugin({
        filename: "[name].css",
        chunkFilename: "[id].css"
    })],

}

1 Ответ

0 голосов
/ 06 сентября 2018

Не самый лучший ответ, но он работает.

Удалите resol-url-loader и оставьте css-loader на url: false. Затем просто напишите ваши URL-пути, как они будут работать из выходного файла.

Я, вероятно, приму это и свяжу свои изображения, хотя.

...