Вроде уже пишу огромные приложения, но натыкаюсь на рефакторинг и тут возникают проблемы с какими-то мелкими настройками, и как всегда твой канал помогает это исправить
если разворачиваете CLI, просто выбираете препроцессор, и все. дальше точно так же создаете в папке assets папку style и в ней фалы стилей, а потом в основном фале js делаете импорт стилей. вот и все, все работает без танцев с бубном.))
На момент написания комментария данный урок не работал. Проблема была в import в main js Система ругалась на дублирование импорта. Убрав эту строчку - все заработало. Аналогичная ситуация и в уроке 3/8. Может кому-то будет полезна инфа
Здравствуйте. Случайно не можете подсказать, как переопределить sass переменную vuetify, но только в нужном компоненте? Я могу переопределить в созданном файле, но оно применяется ко всему проекту. Пробую как пишут в документации, $variable: value , но оно не работает. Также пробую добавлять @import..., но все равно не работает. Можете подсказать как это сделать, или может нужны какие то дополнительные настройки чтоб оно работало в компонентах.
на Vue 3 у меня долго не получалось подключить SASS. Похоже были конфликты разных библиотек. В итоге заработало в таком варианте package.json: "devDependencies": { "sass": "^1.57.1", "sass-loader": "^13.2.0", "webpack": "^5.75.0" }, node-sass и sass похоже конфликтуют, поэтому его не включал. А в файле vue.config.js немного другой синтаксис: css: { loaderOptions: { sass: { additionalData: ` @import "@/assets/styles/styles.scss"; ` },
Спасибо! только один вопрос: как скомпилировать файлы если например нужно отдельно собрать разные css с минимизацией в один, и отдельно все scss в другой?
@@gofrontend2220 в том то вся и загвоздка, что вроде как компилятор есть, а использовать его в полную силу не получается. На Webpack я разбирал для себя, и результат в итоге тот же был. Но vue-cli умеет по сути тоже самое, просто "както" нужно пути прописать - там возьми, обработай, туда положи.
Доброго времени суток. Благодарю вас за объяснение хоть и не с первого раза но всё таки получается разобраться. Есть просьба можете показать или объяснить как подключить SASS во vue.config версией "sass-loader": "^9.0.2"на версии 8.0.2 всё работает. Если я правильно понял там сменилась настройка. Сколько времени ковыряю так и не понял как подключить.
Прошу прощения кривые руки, но синтаксис действительно сменился вместо prependData теперь нужно писать additionalData. Кому интересно cli.vuejs.org/ru/guide/css.html#css-%D0%BC%D0%BE%D0%B4%D1%83n%D0%B8
@@gofrontend2220 Это не баг дев тулзов. В вашем случае в каждом компоненте импортируется файл "styles.scss". Если бы вы во vue.config.js импортировали variables.scss, то дублей бы не было. Предполагается, что импортированный файл будет иметь только переменные миксины и т.д.
какое-то муторное подключение конечно. В main.js импортировали бы, и всё. А тут нужно ещё JS-ку создавать ... Ладно, в любом случае спасибо!! Помогли!! Всё работает!!
Timmi Nero к сожалению просто импортировать в main.js не поможет. Система будет пытаться прочитать scss как обычный css. Для этого и пишем в vue.config настройки. В дальнейшем этом конфиге будут и другие настройки для сборки. Просто для сцсс в том числе
@@gofrontend2220 Я прошу прощения, но я решил использовать SCSS переменную в своём компоненте. Делал всё, как у вас в видео, но когда в компоненте пишу: .note{ color: $mainColor; } Выпадает ошибка = (SassError: Undefined variable.)
./src/assets/styles/styles.scss (./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-3-1!./node_modules/postcss-loader/src??ref--8-oneOf-3-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-3-3!./src/assets/styles/styles.scss) Module build failed (from ./node_modules/sass-loader/dist/cjs.js): TypeError: this.getOptions is not a function at Object.loader (C:\Users\Alex\Desktop\vue internet store\vue ode_modules\sass-loader\dist\index.js:25:24) у меня вот такая ошибка помогите! как сделать ?
лично мне помогло откатиться до "sass-loader": "^10.2.0" и "node-sass": "^6.0.1", так как более новые версии отказывались работать, нужно сделать npm uninstall sass-loader, затем npm install sass-loader@^10.2.0
![[ВАЖНО - Читай описание] Почему вы просто обязаны использовать VUEX в своем приложении!](http://i.ytimg.com/vi/5lBf-Fm4io4/mqdefault.jpg)
![[ВАЖНО - Читай описание] Vue.js компонент всплывающее модальное окно используя SLOT и $REFS](http://i.ytimg.com/vi/QWovG8nVbnA/mqdefault.jpg)
![[ВАЖНО - Читай описание] SELECT. Создание кастомного стилизуемого компонента на Vue.js](/img/n.gif)
Вроде уже пишу огромные приложения, но натыкаюсь на рефакторинг и тут возникают проблемы с какими-то мелкими настройками, и как всегда твой канал помогает это исправить
Офигенно, за 5 минут все подключила. Большое спасибо за видео
Спасибо за информацию. Хорошо объясняете материал
fedor Tov рад стараться:)
Спасибо мужик, подключил, все работает!
Круто, именно это я искал не мог понять какже препроцессор использовать
Welcome:)
если разворачиваете CLI, просто выбираете препроцессор, и все. дальше точно так же создаете в папке assets папку style и в ней фалы стилей, а потом в основном фале js делаете импорт стилей. вот и все, все работает без танцев с бубном.))
То есть в файлах json и Vue.config.js ничего делать не нужно?
@@Михаи-л я пробовал без добавления настройки в vue. config. js и почему-то ничего не менялось, все работало и так без конфига
На момент написания комментария данный урок не работал. Проблема была в import в main js Система ругалась на дублирование импорта. Убрав эту строчку - все заработало. Аналогичная ситуация и в уроке 3/8. Может кому-то будет полезна инфа
! ВАЖНО - Читайте описание к видео ! 🔥🔥🔥👆👆👆
А как пользоваться переменными созданными в variables в vue в компонентах?
+ не понял, подключили мы например нормалайз импортов в styles, но если стилизовать компонентно, нормалайз не подтягивается уже
Точно нужно именно в dependencies прописывать? Не в devDependencies? Это же для разработки инструмент.
Всё работает! Спасибо- лайк, подписка)
Здравствуйте. Случайно не можете подсказать, как переопределить sass переменную vuetify, но только в нужном компоненте? Я могу переопределить в созданном файле, но оно применяется ко всему проекту. Пробую как пишут в документации, $variable: value , но оно не работает. Также пробую добавлять @import..., но все равно не работает. Можете подсказать как это сделать, или может нужны какие то дополнительные настройки чтоб оно работало в компонентах.
на Vue 3 у меня долго не получалось подключить SASS. Похоже были конфликты разных библиотек. В итоге заработало в таком варианте package.json:
"devDependencies": {
"sass": "^1.57.1",
"sass-loader": "^13.2.0",
"webpack": "^5.75.0"
},
node-sass и sass похоже конфликтуют, поэтому его не включал.
А в файле vue.config.js немного другой синтаксис:
css: {
loaderOptions: {
sass: {
additionalData: `
@import "@/assets/styles/styles.scss";
`
},
Привет! а можно полный vue.config.js?
@@itengtv да он огромный
если возникает ошибка синтаксиса, то замените prependData на additionalData
я час сидел с гуглом, не мог решить, спасибо за твой комментарий!
Не подскажите, из-за чего less миксины не работают в компонентах?
Александр Осташик не прописаны настройки для less во vue.config?
@@gofrontend2220 Повторил ваш код, заменив scss на less
Спасибо!
только один вопрос: как скомпилировать файлы если например нужно отдельно собрать разные css с минимизацией в один, и отдельно все scss в другой?
Александр Башинский это вам уже к webpack. За это vue вроде не отвечает. Скорее всего в настпойках vue.config надо что то прописать
@@gofrontend2220 в том то вся и загвоздка, что вроде как компилятор есть, а использовать его в полную силу не получается. На Webpack я разбирал для себя, и результат в итоге тот же был. Но vue-cli умеет по сути тоже самое, просто "както" нужно пути прописать - там возьми, обработай, туда положи.
Доброго времени суток. Благодарю вас за объяснение хоть и не с первого раза но всё таки получается разобраться. Есть просьба можете показать или объяснить как подключить SASS во vue.config версией "sass-loader": "^9.0.2"на версии 8.0.2 всё работает. Если я правильно понял там сменилась настройка. Сколько времени ковыряю так и не понял как подключить.
Прошу прощения кривые руки, но синтаксис действительно сменился вместо prependData теперь нужно писать additionalData. Кому интересно cli.vuejs.org/ru/guide/css.html#css-%D0%BC%D0%BE%D0%B4%D1%83n%D0%B8
@@ИгорьПономарев-в5ы Да все верно. Иногда ребята разрыботчики так меняют на стороне данные. Но благо в ошибках вебпака можно все это прочитать
В инструментах разработчика на видео видно, что css-код в итоге дублируется. Я столкнулся с той же ситуацией, подскажите, как убрать дублирование?
Баг дев тулзов
@@gofrontend2220 Это не баг дев тулзов. В вашем случае в каждом компоненте импортируется файл "styles.scss". Если бы вы во vue.config.js импортировали variables.scss, то дублей бы не было. Предполагается, что импортированный файл будет иметь только переменные миксины и т.д.
спасибо!!!!
Не работает на vue 2.6.12 :((
Огромное спасибо
Олег Громов наздоровье :)
Во Vue 4 указанный способ не работает. Sass вообще отказывается дружить с Vue 4. Кто подскажет, как их подружить?
Vue 4 не существует если что
какое-то муторное подключение конечно.
В main.js импортировали бы, и всё. А тут нужно ещё JS-ку создавать ...
Ладно, в любом случае спасибо!! Помогли!! Всё работает!!
Timmi Nero к сожалению просто импортировать в main.js не поможет. Система будет пытаться прочитать scss как обычный css. Для этого и пишем в vue.config настройки. В дальнейшем этом конфиге будут и другие настройки для сборки. Просто для сцсс в том числе
@@gofrontend2220 Я прошу прощения, но я решил использовать SCSS переменную в своём компоненте.
Делал всё, как у вас в видео, но когда в компоненте пишу:
.note{ color: $mainColor; }
Выпадает ошибка = (SassError: Undefined variable.)
Ааа, разобрался. Нужно было остановить сервер (Ctrl+C) и запустить его снова (npm run serve) чтобы изменения вступили в силу (видимо)
Timmi Nero да. Любые изменения в конфиг файлах требуют пересборку. В остальном не требуют
нет ничего лучше чистого css
господи простой css ужасен
./src/assets/styles/styles.scss (./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-3-1!./node_modules/postcss-loader/src??ref--8-oneOf-3-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-3-3!./src/assets/styles/styles.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
at Object.loader (C:\Users\Alex\Desktop\vue internet store\vue
ode_modules\sass-loader\dist\index.js:25:24) у меня вот такая ошибка помогите! как сделать ?
аналогичная байда, нашли как быть? я нет...
лично мне помогло откатиться до "sass-loader": "^10.2.0" и "node-sass": "^6.0.1",
так как более новые версии отказывались работать, нужно сделать npm uninstall sass-loader, затем npm install sass-loader@^10.2.0