Vue SFC Добавить глобальные переменные SASS для всех компонентов -- vue.js поле с участием webpack поле с участием import поле с участием sass поле с участием global-variables пол Связанный проблема

Vue SFC add global Sass variables to all components


0
vote

проблема

русский

im my webpack config i добавляю путь

 <код>  "mixins": path.resolve(         __dirname,         "resources/assets/sass/mixins/mixins.scss"       ),   

что означает во всех моих единых файловых компонентах, которые я использую

 <код> <style lang='scss' scoped>     @import '~variables';   

Это работает нормально, но то, что я нахожу, это этот файл используется в 95% компонентов, поэтому импорт действительно не нужен. Я хочу, чтобы эти Варс доступны везде.

Как во всем мире можно во всем мире добавить мою SAS на моих файловых компонентах без необходимости импорта в каждом файле?

Английский оригинал

Im my webpack config I add a path

 "mixins": path.resolve(         __dirname,         "resources/assets/sass/mixins/mixins.scss"       ), 

Which means in all my single file components I use

<style lang='scss' scoped>     @import '~variables'; 

This works fine but what I am finding is this file is used in 95% of components so the import really is unnecessary. I want these vars available everywhere.

How can I globally add my SASS to my single file components without the need for the import in every file?

</div
              

Список ответов

2
 
vote
vote
Лучший ответ
 
<Р> Ну, Загрузите общий CSS от Webpack и сделать его доступным во всем мире для всех компонентов. Конфигурации WebPack, как показано ниже.

<код> sass-loader также поддерживает опцию данных, которая позволяет совместно использовать общие переменные среди всех обработанных файлов без явного их импорта

 <код> module.exports = {   css: {     loaderOptions: {       sass: {         data: `           @import "@/scss/_variables.scss";           @import "@/scss/_mixins.scss";         `       }     }   } };   
<Р> Здесь, задав в Sass погрузчик под опцией loaderOptions. Просто так, что весь код в этих файлах будет доступен в глобальном масштабе. Таким образом, из любого компонента мы можем использовать его из коробки: <Р> И теперь вы можете получить доступ к переменной в вашей Вью SFC без импорта.
 <код> <style lang="scss"> .classroom {   /* No need to import, it just works o/ */   background: $bg-classroom; } </style>   
<Р> Ссылка Официальный Docs здесь < / р>

Надеюсь, это поможет!

 

Well, Load your common CSS from Webpack and make it available globally for all the component. Webpack configurations are as below.

sass-loader also supports a data option which allows you to share common variables among all processed files without having to explicit import them

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

In here, specifing the sass loader under the loaderOptions option. Just like that, all the code in those files will be available in the global scope. So from any component we can use it out of the box:

And now you can able to access the variable in your Vue SFC without importing it.

<style lang="scss"> .classroom {   /* No need to import, it just works o/ */   background: $bg-classroom; } </style> 

Reference Official Docs here

Hope this helps!

</div
 
 

Связанный проблема

1  вя-часы-подборщик не работает должным образом в течение цикла в VUE JS  ( Vue clock picker doesnt work properly in for loop in vue js ) 
<Р> Я пытаюсь использовать VUE-часы-подборщик для выбора времени. Вот то, что я сделал - <код> { "name": "Name", "code" "Code", "_embedded" : { ...

2  Как запустить созданный веб-сайт NUXT из файловой системы?  ( How to run a nuxt generated website from filesystem ) 
Когда я запускаю веб-сайт NUXT сгенерированного Vue из файловой системы, без сервера, я получаю <код> GET file:///_nuxt/... с состоянием <код> (failed) Ка...

11  Сохранить вертикальные пробелы в Vue шаблон с красивее  ( Preserve vertical whitespace in vue template with prettier ) 
Я использую eslint-plugin-vue с моим Vuue Project. У меня есть следующий <код> .prettierrc файл: <Код> // /.prettierrc { "arrowParens": "avoid", "b...

0  Laravel Vue Axios не возвращает ответы  ( Laravel vue axios not returning response data ) 
Это мой первый раз, используя Laravel Vue и Axios. Я пытаюсь добавить кнопку Подписаться на канал пользователя. Это не возвращает абонентские ответы в Axios?....

2  Скачать массив изображений на кнопку  ( Download array of images on click of a button ) 
У меня есть очень базовый HTML-блок, который имеет <код> button для загрузки: <код> <div id="getImageWrapper"> <div class="image"> <p class="im...

2  Как сосредоточиться на V-Textarea, программически в Vuetify и Teadycript?  ( How to focus v textarea programatically in vuetify and typescript ) 
кажется невозможным сейчас, я пробовал сумасшедшие вещи, как: <код> (this.refs.vtextarea as any).textarea.focus() ((this.refs.vtextarea as Vue).$el as HTML...

0  V-Carousel отзывчивается, но не изображения, которые он содержит  ( V carousel is responsive but not the images it contains ) 
Когда я использую V-Carousel , все работает нормально, кроме я заметил на мобильном Если сама карусель отзывчивается, изображения внутри нее нет, поэтому ото...

1  Визуализация списка элементов в компоненте, прилагаемой маршрутизатором  ( Render list of items in a component attached by router ) 
Я хотел бы перечислить элементы и отобразить детали, когда щелкнулся элемент. Сценарий выглядит как ниже: <код> const items = [ { id: 1, }, { ...

1  Vue.js добавить класс для исчезновения с v-если  ( Vue js add class for fade in with v if ) 
У меня есть настройка системы вкладки с vue.js и работает хорошо. Моя единственная проблема заключается в том, что добавление классов для исчезновения в непро...

0  Код JavaScript в модальном загрузке не работает  ( Javascript code in modal of bootstrap not run ) 
код JavaScript в модальном загрузке не запускается: в CoCOle, ошибка такова: Если код не помещен в модуль, нет ошибок, как выше скриншот. код: (код не ...

0  Локальные / литералы, содержащие HTML  ( Locales literals containing html ) 
в <Код> locale/lang.json У меня есть <код> { "title": "Title", "image": "service-corporate_thumb-v2.jpg", "alt": "alt", "imageFooter": "Some capt...

1  Держите токен обновлен на действии Axios  ( Keep token updated on axios action ) 
Я хочу использовать API Express REST, который требует действительного веб-маршрута JSON для некоторых маршрутов. Из-за того, что я должен передать токен от Lo...

3  Адаптер загрузки CKeditor отправляет [Обещание объекта] на сервер  ( Ckeditor upload adapter sends object promise to server ) 
Я пытался реализовать Ckeditor5 в проект Vuejs, а после получения всей рабочей инфраструктуры я не могу получить фактический файл для загрузки на сервер PHP. ...

0  Смотреть реквиты от детского компонента Vue.js  ( Watch props from children component vue js ) 
У меня есть два компонента «Number-IPut» и «вход корзины». Как я могу смотреть опоры из номера ввода (значение) в корзине? номер входного компонента: <код...

3  Динамически добавлять строки, чтобы сформировать использование Vue.js  ( Dynamically add rows to form using vue js ) 
Я пытаюсь сделать динамическую форму, используя Vue. Пользователь нажимает кнопку «Добавить», и для них появляется другой ряд, чтобы добавить данные. Проблема...

Связанный проблема

1  вя-часы-подборщик не работает должным образом в течение цикла в VUE JS 
2  Как запустить созданный веб-сайт NUXT из файловой системы? 
11  Сохранить вертикальные пробелы в Vue шаблон с красивее 
0  Laravel Vue Axios не возвращает ответы 
2  Скачать массив изображений на кнопку 
2  Как сосредоточиться на V-Textarea, программически в Vuetify и Teadycript? 
0  V-Carousel отзывчивается, но не изображения, которые он содержит 
1  Визуализация списка элементов в компоненте, прилагаемой маршрутизатором 
1  Vue.js добавить класс для исчезновения с v-если 
0  Код JavaScript в модальном загрузке не работает 
0  Локальные / литералы, содержащие HTML 
1  Держите токен обновлен на действии Axios 
3  Адаптер загрузки CKeditor отправляет [Обещание объекта] на сервер 
0  Смотреть реквиты от детского компонента Vue.js 
3  Динамически добавлять строки, чтобы сформировать использование Vue.js