Установка глобальных переменных sass в проекте vue

Я создал файл vue.config.js, чтобы установить некоторые глобальные переменные sass (точно так же, как указывает документация), однако при попытке доступа к переменным в компоненте я получаю неопределенную ошибку. Добавление того же оператора импорта вручную в компонент работает, но почему-то его не извлекают из файла vue.config.js. Я проверил, что у меня установлены node-sass и sass-loader и что vue.config.js находится в корне проекта (рядом с package.json). Что мне не хватает?

module.exports = {
    css: {
        loaderOptions: {
            sass: {
                data: `
                    @import "@/assets/styles/_variables.scss";
                `
            }
        }
    }
}

vue.js sass configuration

08.12.2018 21:40

Стоит ли изучать PHP в 2026-2027 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

9 390

Ответы 4

Трудно устранить неполадки без полного контекста, поэтому вот несколько вариантов, которые вы можете попробовать:

Убедитесь, что вы перезапустили среду разработки после изменения конфигурации (перезапустите yarn dev или npm run dev)
Сохраняйте шаблонный литерал до одной строки, как это используется в документации. Это не должно иметь значения, но может. (например, data: `@import "@/assets/styles/_variables.scss";`)
Как вы, наверное, знаете, подчеркивание перед файлом sass обозначает партиал sass. Партиал не используется в примере, поэтому возможно, что это тоже имеет значение. (например, переименуйте _variables.scss в variables.scss и используйте data: `@import "@/assets/styles/variables.scss";`)
Убедитесь, что пакеты sass-loader, node-sass и css-loader обновлены.
Попробуйте использовать путь без косой черты после @. например @assets/styles/_variables.scss.
Попробуйте использовать ~ вместо @. например ~assets/styles/_variables.scss. Если ничего не помогло, попробуйте также заменить @ на src.

Удачи!

Спасибо за помощь! Уточнение: когда вы говорите «Убедитесь, что все обновлено», вы имеете в виду последнюю версию или просто ту, которая указана в package.json? Я пробовал все остальное, и это, к сожалению, не помогло.

— 09.12.2018 02:28

@Phendan Нет проблем! И я имею в виду последнюю версию или хотя бы минимальную версию, совместимую с документированным API. API глобальных переменных не всегда был доступен. Так что, если это не новый проект, обновление пакетов будет стоить вашего времени.

— 09.12.2018 10:13

08.12.2018 23:22

npm install --save-dev node-sass sass-loader
Создайте файл vue.config.js в корне

Добавьте код ниже. Помните - @ относится к папке / src

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: '@import "@/assets/css/variables/_colors.scss";'
      }
    }
  }
}

Перезапустить проект

18.05.2019 17:19

Измените data на prependData

module.exports = {
    css: {
        loaderOptions: {
            sass: {
                prependData: `
                    @import "@/assets/styles/_variables.scss";
                `
            }
        }
    }
}

Подробнее об этом можно прочитать здесь: предварительная загрузка документов

06.01.2020 10:59

этот код для vue3

установить:

Sass

npm install -D sass-loader@^10 sass

волокна

npm install -D fibers

Загрузчик ресурсов стиля

npm i style-resources-loader -D

в вашем vue.config.js (проект корневого уровня)

module.exports = {
    css: {
        loaderOptions: {
            sass: {
                additionalData: `
                    @import "@/assets/styles/scss/_variables.scss";
                `
            }
        }
    }
}

символ @ означает, что ваш файл начинается с папки src

26.06.2021 11:08