Question

如何使用Webpack 3 +维护CSS / SCSS文件中使用的图像的文件夹结构？

我不想保留图片的整个文件路径，但我想要的不仅仅是[name].[ext]

例如，请考虑以下文件夹结构：

/
/app.js
/src
    /styles
    /images
        main-image.png
        /backgrounds
            my-bg.png
/dist
    /img
        /backgrounds

在我的webpack.config文件中，我的图像有以下加载器：

{
    test: /\.(png|jpg)$/,
    loader: 'file-loader?limit=1000000',
    options: {
        name: '/img/[name].[ext]'
    }
},

鉴于我已经建立的其他配置（但未显示），包括别名，上面显示的加载器会将所有图像转储到我的/dist/img/文件夹中，保留文件名和扩展名。这意味着我最初/src/images/backgrounds/my-bg.png的背景图片最终为/dist/img/my-bg.png

我的问题是，在将BG图像移动到background时，如何让webpack保留dist目录？

{
    test: /\.(png|jpg)$/,
    //include: path.join(__dirname, 'myImages'),
    loader: 'file-loader?limit=1000000',
    options: {
        name: '/img/[path]/[name].[ext]'
    }
},

此配置不起作用，因为CSS中生成的文件路径变为/img/src/images/backgrounds/my-bg.png

我需要什么其他配置来实现我想要的结果？

以下是使用背景图片的SCSS：

background: {
  image: url('images/backgrounds/my-bg.png');
  ...
}

有关文件路径和CSS加载器的更多信息，我发现这有用：https://github.com/webpack-contrib/css-loader#root-relative-urls

使用Webpack解析CSS中的URL

0 个答案: