Как я могу добавить подпапку в фоновом режиме URL в файлах Sass в производстве? - PullRequest
Новая
       10

Как я могу добавить подпапку в фоновом режиме URL в файлах Sass в производстве?

0 голосов
/ 29 февраля 2020

В режиме разработки с Далее JS у меня есть пути, как в следующем примере в моих SASS файлах: 

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

Но в рабочем режиме Я собираюсь загрузить веб-сайт в подпапку домена, например: 

www.domain.com/subfolder/

Мне нужно построить его так: 

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

Как я могу получить его?

Также я использую withCSS и withSass в своем файле конфигурации, я пробовал несколько 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]"
                        }
                    }
                ]
            });

1 Ответ

1 голос
/ 29 февраля 2020

Благодаря комментарию @ grzegorz-t я смог ее решить, я поставил решение здесь. 

npm install postcss-url --save-dev

post css .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: {}
    }
};
...