Переписывание url sass при построении проекта

Я использую webpack-dev-server во время разработки и имею общую папку в качестве базы содержимого, содержащей: index.html, img/**.*.формат jpg.

Во время разработки в моем файле sass я ссылаюсь на образы как:

background-image: url('img/background.jpg');

Это прекрасно работает во время разработки, так как webpack-dev-server обслуживает образы в общей папке.

Но когда я создаю проект и создаю папку dist, которая позже будет развернута на тестовом сервере, мне нужно переписать все URL-адреса в файлах sass, так как они не будут обслуживаться из корня веб-сервера. В моем случае я хотел бы переписать предыдущее правило css как:

background-image: url('folder1/folder2/folder3/img/background.jpg');

Возможно ли это?

2 ответа

  1. Не совсем. Я бы рекомендовал вам вместо этого сохранить ваши пути относительно папки, в которой вы находитесь в настоящее время. Например, иметь assetsпапку, которая имеет обаimgsass, и т.д. Тогда ваши пути могут быть относительно assetsкорня, в отличие от необходимости перехода в отдельную папку сборки. Таким образом , это не будет иметь значения, если вы находитесь вbuild, distили иначе.

    Например:

    |assets
    |-sass
    |--my_styles.scss
    |--SUBSTYLES
    |---my_substyles.scss
    |-img
    |--my_img.png
    

    и тогда ваши пути будут:

    url(../img/my_img.png) //For my_styles.scss
    

    и

    url(../../img/my_img.png) //For my_substyles.scss
    

    В противном случае необходимо сохранить отдельный файл переменной для каждого типа сервера/сборки, который определяет ROOT_PATHпеременную и добавляет ее в SASS. Что-то вроде

    url($ROOT_PATH + 'img/my_img.png')
    

    который всегда может быть завернут в миксин, который будет использоваться более легко.

  2. Я решил это с помощью переменных среды с помощью Sass-loader.

    module.exports = {
      ...
      sassLoader: {
        data: "$env: " + process.env.NODE_ENV + ";"
      }
    };