Question

我遇到了Webpack Encore和SCSS的问题。

我的项目中有一个SCSS文件，一个图像和Webpack Encore。但是，当我使用Webpack进行编译时，它会将我的原始文件logo.png的副本生成到logo.<hash>.png中，这是正常的，但是图像未显示并且我什至无法打开它，该图像有点被删除

另一方面，我使用CopyWebpackPlugin生成的所有图像都是可读的，但是我无法从SCSS中访问它...

结构

/assets
    /images
        logo.png
    /scss
        app.scss
/public
    /build
        /css
            app.<hash>.css
        /images
            logo.<hash>.png

app.scss

div {
    background-image: url('../images/logo.png');
}

webpack.config.js

var Encore = require('@symfony/webpack-encore');
var webpack = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');

Encore
    // the project directory where compiled assets will be stored
    .setOutputPath('public/build/')

    // the public path used by the web server to access the previous directory
    .setPublicPath('/build')

    .cleanupOutputBeforeBuild()

    .enableSourceMaps(!Encore.isProduction())

    // uncomment to create hashed filenames (e.g. app.abc123.css)
    .enableVersioning()

    // IMAGES
    .addPlugin(new CopyWebpackPlugin([
        {
            from: './assets/images',
            to: 'images',
            force: true
        }
    ]))

    // CSS
    .addStyleEntry('css/app', [
        './assets/scss/app.scss',
    ])

    // uncomment if you use Sass/SCSS files
    .enableSassLoader(function(options) {
        // https://github.com/sass/node-sass#options
    })

    .addLoader({loader: 'shebang-loader'})

    // uncomment for legacy applications that require $/jQuery as a global variable
    .autoProvidejQuery()

    .enableBuildNotifications()
;

module.exports = Encore.getWebpackConfig();

有人可以告诉我我做错了吗

Answer 1

您可以删除

.cleanupOutputBeforeBuild（）

或添加类似的内容：

.cleanupOutputBeforeBuild(['static'], (options) => {
        options.verbose = true;
        options.root = __dirname;
        options.exclude = ['img'];
    })

Webpack Encore删除我的图片

1 个答案: