Как настроить путь вывода для скомпилированных файлов css с помощью расширения компилятора vscode live sass в windows10?

У меня была такая же проблема, когда я начал внедрять методологию SMACSS в свои проекты. Это решение, которое я пробовал. надеюсь, это поможет вам.

Перейдите в настройки пользователя VScode -> выберите "Конфигурация компилятора Live Sass -> добавить".

"liveSassCompile.settings.formats": [{
        "format": "expanded",
        "extensionName": ".css",
        "savePath": "./css"
    }]

Делайте все, как сказала Сулара. Когда вы открываете файл settings.json, он может выглядеть так.

{
    "window.zoomLevel": 0
}

Итак, вам необходимо применить следующие рекомендуемые настройки.

{
    "window.zoomLevel": 0,
    "liveSassCompile.settings.formats": [{
        "format": "expanded",
        "extensionName": ".css",
        "savePath": "./css"
    }]
}

Вы можете перейти в файл VSCode Setting.json и добавить следующие строки после существующей конфигурации.

Пример:

src путь- папка_проекта / sass / style.scss

выходной путь - папка_проекта / css / style.css

"liveSassCompile.settings.formats": [{ "format": "expanded", "extensionName": ".css", "savePath": "/css/" }]

Перейдите в меню VScode - файл> настройки> настройки> расширение> конфигурация копии live sass> отредактируйте в settings.json

и вставьте его код >>

  "liveSassCompile.settings.formats": [
    {
      "format": "expanded",
      "extensionName": ".css",
      "savePath": "~/../css/"
    }
  ]

Вы можете перейти в файл VSCode Setting.json и добавить следующие строки после существующей конфигурации.

Пример:

"liveSassCompile.settings.formats": [
    {
      "format": "expanded",
      "extensionName": ".css",
      "savePath": "~/../dist/css/"
    }
  ]

Перейдите к настройкам расширения SassCompiler в реальном времени, введите ниже настройку кода в файл JSON и сохраните.

    "liveSassCompile.settings.autoprefix": [],
"liveSassCompile.settings.formats": [
    {
        "format": "expanded",
        "extensionName": ".css",
        "savePath": "~/../dist/css/"
    }

Не уверен, что это поможет кому-то, так как это было давно, но недавно у меня было несколько папок, открытых в VSCode, и каждый раз, когда я пытался использовать live sass-компилятор, он переходил в папку, которая была вверху списка, и создавал css / styles.css внутри этого каталога.

Я видел это решение на сайте создателей Live Sass Compiler: https://ritwickdey.github.io/vscode-live-sass-compiler/docs/faqs.html

То, что вы делаете, просто, скажем, у вас есть архитектура папок как мой здесь. (ссылка на изображение)

Все, что вам нужно сделать, это создать папку с именем .vscode и добавить в нее файл settings.json.

Внутри settings.json вставьте следующий код:

{
"liveSassCompile.settings.formats": [
    {
        "format": "expanded",
        "extensionName": ".css",
        "savePath": "/Parallax/css"
    },
    {
        "extensionName": ".min.css",
        "format": "compressed",
        "savePath": "/Parallax/dist/css"
    }
],

"liveSassCompile.settings.excludeList": [
    "**/node_modules/**",
    ".vscode/**"
],
"liveSassCompile.settings.generateMap": true,
"liveSassCompile.settings.autoprefix": [
    "> 1%",
    "last 2 versions"
]

}

Обратите внимание, как отформатирован мой liveSassCompile.settings.formats: я написал пути сохранения как / Parallax / css / и / Parallax / dist / css. Это идет в корень проекта и сохраняет файлы css внутри папок css и dist, которые находятся внутри Каталог параллакса. (ссылка на изображение)

В заключение, каждый раз, когда вы хотите изменить путь для сохранения, все, что вам нужно сделать, это изменить файл settings.json внутри папки .vscode, а не изменять пользовательские настройки, что, на мой взгляд, утомительно.

Окончательная структура должна выглядеть как это после редактирования файла main.scss.

Внутри вашего проекта создайте каталог (.vscode). В папке .vscode создайте файл json с именем settings.json. В файле settings.json введите следующие пары ключ-значение. Кстати, вы получите интеллект. Я надеюсь это сработает

{
 "liveSassCompile.settings.formats":[
    {
        "format": "expanded",
        "extensionName": ".css",
        "savePath": "/css"
    },
    {
        "extensionName": ".min.css",
        "format": "compressed",
        "savePath": "/dist/css"
    }
],
"liveSassCompile.settings.excludeList": [
   "**/node_modules/**",
   ".vscode/**"
],
"liveSassCompile.settings.generateMap": true,
"liveSassCompile.settings.autoprefix": [
    "> 1%",
    "last 2 versions"
]
}

Ни один из вышеперечисленных методов у меня не работал, пока я не использовал приведенный ниже код в settings.json.

    {

"liveSassCompile.settings.formats": [
  {
    "format": "expanded",
    "extensionName": ".css",
    "savePath": "~/../../css/"     
}

],

  "editor.minimap.enabled": true,
  "liveSassCompile.settings.generateMap": false
}

On the savePath line you have to keep the "~" or else it wont work.

On "editor.minimap.enabled": and "liveSassCompile.settings.generateMap":

These lines are for if you want to generate a map.css file, put "false" for no, or "true" for yes.

Добавьте это, чтобы сгенерировать файлы .css в папке css в корневом каталоге проекта:

"liveSassCompile.settings.formats": [
    {
      "format": "expanded",
      "extensionName": ".css",
      "savePath": "/css"
    }
  ],

Или сгенерировать в dist/css:

"liveSassCompile.settings.formats": [
    {
      "format": "expanded",
      "extensionName": ".css",
      "savePath": "/dist/css"
    }
  ]

Это может быть в VS Code global settings.json для применения ко всем проектам (найдите "liveSassCompile.settings.formats" и измените строку "savePath"; предоставленные "format" и "extensionName" уже являются значениями по умолчанию), или если вы хотите ограничить настройки текущим проектом, поместите настройки в файле settings.json в папке с именем .vscode.

Обратитесь к документации настроек Live Sass Compiler для получения дополнительной информации: https://github.com/ritwickdey/vscode-live-sass-compiler/blob/master/docs/settings.md