Laravel Blade，Mix和SASS资源版本共享

Question

bounty到期在2天内。该问题的答案有资格获得+ 500声望赏金。Marc想要引起更多关注对此问题。

在我的项目中，我在SASS和Blade中都使用了一些资源（主要是图像）。另外，我有一些资源仅在SASS中使用，而某些资源仅在Blade中使用。

例如，我可以在Blade文件中使用mix('images/logo.png')，在SASS文件中使用background: url('../images/logo.png')。

关于我的目录结构，我做了以下工作：

- resources
    - js
    - sass
    - images  // All images used by Blade, Sass, or both
    - fonts

为了编译我的资源并将它们放置在public文件夹中，我习惯于关注webpack.mix.js：

mix.copy('resources/images/**/*.*', 'public/images');
mix.copy('resources/fonts/**/*.*', 'public/fonts');
mix.version('public/images/**/*.*');
mix.version('public/fonts/**/*.*');

mix.js('resources/js/app.js', 'public/js')
    .js('resources/js/vendor.js', 'public/js')
    .scripts([ // Old not ES6 JS
        'resources/js/tpl/core.min.js'
    ], 'public/js/core.min.js')
    .sass('resources/sass/app.scss', 'public/css')
    .sourceMaps()
    .version();

结果，我在app.css中获得了该URL：

background: url(/images/logo.png?0e567ce87146d0353fe7f19f17b18aca);

虽然我在渲染的HTML中又得到了一个：

src="/images/logo.png?id=4d4e33eae039c367c8e9"
它们被认为是2种不同的资源，这不是我所期望的...

潜在的解决方法

[我发现SASS生成的CSS文件使用版本化的URL，即使我未在version()中指定webpack.mix.js。所以我想知道也许我可以使用一些技巧，像这样：

const sass = require('sass');

// Custom SASS function to get versioned file name
// Uses Mix version md5 hash
const functions = {
    'versioned($uri)': function(uri, done) {
        uri = uri && uri.getValue() || uri;
        const version = File.find(path.join(Config.publicPath, uri)).version();
        done(new sass.types.String(`${uri}?id=${version}`));
    }
};

mix.sass('resources/sass/all.scss', 'public/css', { 
        sassOptions: {
            functions
        }
    })
    .options({ // Do not process URLs anymore
        processCssUrls: false
    });
并像这样在SASS中使用它：

background-image: url(versioned('/images/logo.png'));
但是此解决方案有很多缺点，我不得不每次都使用versioned函数，如果没有webpack.mix.js函数，我的源代码将无法在其他项目中轻松工作，并且我必须编辑每个我在资源文件夹中使用该功能。

其他解决方案？

[我认为问题的根源可能来自文件的结构方式，我有一个resources/images文件夹，其中包含SASS使用的图像，也包含Blade所使用的图像。SASS中使用的图像将被复制到public/images，因为这是SASS与webpack一起工作的方式，并且这些图像也将被第二次复制，因为我使用了mix.copy()（因为我需要将其他文件放在该文件夹的公共文件夹中）以便可以在Blade / HTML中访问）。

我很确定自己在某个地方有误，我在互联网上寻找了使用Laravel中SASS和Blade资源的正确方法，但没有发现任何相关的信息。也许我应该考虑其他文件结构？但是哪一个呢？

在我的项目中，我在SASS和Blade中都使用了一些资源（主要是图像）。另外，我有一些资源仅在SASS中使用，而某些资源仅在Blade中使用。例如，我可以使用mix（'images / logo.png'）...

Answer 1

我发现由SASS生成的CSS文件使用版本化的URL，即使我未在webpack.mix.js中指定version（）。