Webpack, css-loader или postcss-loader выводят неверный путь к изображению в файлах css - PullRequest
Новая
       80

Webpack, css-loader или postcss-loader выводят неверный путь к изображению в файлах css

0 голосов
/ 10 мая 2019

Я обнаружил, что у многих людей есть проблемы с этим, но нет решения, которое бы работало для меня.Моя файловая структура: 

src
--images
--scss
..
dist
--css
--images
..

В моем scss файле у меня есть background-image: url('../assets/image/example.png')

В моем выходном файле main.css фоновое изображение изменяется на assets/image/example.png

Я знаю, что некоторые люди говорили, что создайте resolve alias, а затем измените URL на псевдоним ~alias/image/example.png.Это не работает, так как URL в файле CSS не обновляется.

Я пробовал дюжину разных подходов, и, похоже, ничего не решило проблему.Я знаю, поместил ли я main.scss в основную папку src, это не было бы проблемой, но я не хочу этого делать.

Вот мой конфиг веб-пакета: 

module: {
    entry: {
      main: path.join(__dirname, CONFIG.src),
    },
    output: {
      filename: '[name].js',
      path: path.join(__dirname, CONFIG.output),
    },
    rules: [
        {
            test: /\.(s*)css$/,
            use: [
                'style-loader',
                {
                    loader: 'file-loader',
                    options: {
                        name: '[name].build.css',
                        context: './',
                        outputPath: output,
                    },
                },
                {
                    loader: 'extract-loader',
                },
                'css-loader',
                'sass-loader',
                'postcss-loader',
            ],
        },
        {
          test: /\.(png|jpg)$/,
          include,
          exclude,
          use: [
            {
              loader: 'file-loader',
              options,
            },
        ],
      },
    ],
    plugins: [
      // Copy the images folder and optimize all the images
      new CopyWebpackPlugin(options),
      new ImageminPlugin({ test: /\.(jpe?g|png|gif|svg)$/i }),
    ],
},

ОБНОВЛЕНИЕ Я только что добавил publicPath: '../', к своему изображению file-loader опции, и это помогло.Если есть лучший способ сделать это, я хотел бы знать!

...