时间戳

首页 > 解决方案 > 如何在生产中的 Sass 文件的 url 背景中添加子文件夹？

webpack - 如何在生产中的 Sass 文件的 url 背景中添加子文件夹？

问题描述

在NextJS的开发模式下，我的SASS文件中有以下示例中的路径：

background-image: url(/images/bg-header.png) !important;

但在生产模式下，我会将网站上传到域的子文件夹中，例如：

www.domain.com/subfolder/

我需要它像这样构建：

background-image: url(/subfolder/images/bg-header.png) !important;

我怎么才能得到它？

另外我正在使用withCSSandwithSass在我的配置文件中，我尝试了几个next.config.js，但没有任何效果。

const config = {
....
webpack: (config, options) => {
        // config.resolve.alias["@assets"] = '/subfolder/';
        config.plugins.push(
            new MiniCssExtractPlugin({
                    filename: 'static/css/[name].css',
                    chunkFilename: 'static/css/[name].chunk.css',
                    publicPath: '/subfolder/'
            })
        );
        return config
    },
};
module.exports = withSass(withCss(config));

我也试过这个，它也不起作用。

 config.module.rules.push({
            test: /\.(png|jpg|gif|svg|ico)$/,
                use: [
                    {
                        loader: "url-loader",
                        options: {
                            limit: 8192,
                            fallback: "file-loader",
                            publicPath: "/subfolder/",
                            outputPath: "/subfolder/",
                            name: "/subfolder/[name].[ext]"
                        }
                    }
                ]
            });

标签： webpacknext.js

解决方案

感谢@grzegorz-t 评论我已经能够解决它，我把解决方案放在这里。

npm install postcss-url --save-dev

postcss.config.js

const isProd = process.env.NODE_ENV === 'production';
const subFolder = isProd ? '/subfolder' : '';

module.exports = {
    plugins: {
        'postcss-url': {
            url: (asset) => {
               if (asset.url[0] === '/'){
                   return subFolder+asset.url
               }
                return asset.url;
            }
        },
        autoprefixer: {}
    }
};

推荐阅读