vue.js: zawsze załadować plik settings.scss w każdym punkcie stylu vue

Question

znajdę się powtarzając ten sam wzór w każdym pliku .vue, w celu wykorzystania zmiennych itp .:

<style lang="scss"> 
    @import "../styles/settings.scss"; 

    .someclass { color: $some-variable; } 
</style> 

lub jeżeli to zagnieżdżone w folderze muszę pamiętać, aby być ostrożnym przy ścieżce:

<style lang="scss"> 
    @import "../../styles/settings.scss"; 

</style> 

Czy istnieje sposób aby globalnie import że settings.scss plik w każdym pliku .vue tworzę? Spojrzałem w dokumentach i nie widziałem go, ale może go nie zauważyłem, a może to jest coś, co muszę zrobić, aby wykorzystać pakiet sieci Web?

Answer 1

Oficjalne Docs zostały zaktualizowane od Poprosiłem to pytanie: https://vue-loader.vuejs.org/en/configurations/pre-processors.html

dla nikogo innego przegląda ten w 2017 roku i później, sprawdź instrukcje w sekcji „ładowania pliku Ustawienia globalne”.

Answer 2

Jeśli wszystkie komponenty zostaną zapisane w tym samym katalogu, ścieżka do pliku settings.scss pozostanie taka sama.

Jest to pożądana funkcjonalność pakietu internetowego. Zasada polega na tym, aby mieć jak najmniej globalsów i uwzględniać tylko to, czego potrzebujesz, dzięki czemu Twój projekt jest chudy, wydajny i łatwy do zrozumienia.

Może powinieneś zrestrukturyzować swoje komponenty/stylizacje tak, aby nie mieć tylu niestandardowych stylów w każdym komponencie Vue (zbudować własny bootstrap?), Dlatego nie będziesz musiał umieszczać konkretnego arkusza stylów wewnątrz każdego komponentu Vue .

To naprawdę nie odpowiada na twoje pytanie, ale może cię poprowadzić w kierunku dostosowania się do zasad działania narzędzi, z którymi współpracujesz.

Powodzenia!

Answer 3

Byłem tam - niestety nie ma sposobu, aby to zrobić bez importowania pliku w każdym komponencie. Aby obejść ten problem, można spróbować utworzyć klasy pomocnicze z color: $some-variable i background-color: $some-variable, które mogą obejmować niektóre z przypadków użycia.

Jeśli importujesz plik w każdym, upewnij się, że zawiera tylko zmienne. Nie chcesz wielokrotnie włączać reguł stylu.

W przeciwnym razie utworzyłbym oddzielne pliki .scss dla każdego komponentu. Nadal możesz używać szablonów .vue dla html i js, ale zachowaj style oddzielnie. Jest to prawdopodobnie najbardziej skuteczny sposób na zrobienie tego.

Answer 4

Nie wierzę, że można globalnie zaimportować plik. Prawdopodobnie nie zrobiłbym tego, nie jest to wystarczająco wyraźne. Jeśli ktoś chce przenieść ten komponent do innego projektu, będzie miał pomysł, że polega na tym pliku.

Można jednak znacznie ułatwić zarządzanie ścieżkami. Można dodać do pliku konfiguracyjnego WebPACK ...

sassLoader: { 
    includePaths: [ 
    path.resolve(__dirname, './sass') 
    ] 
}, 

Następnie można dołączyć pliki z katalogu projektów wykorzenić /sass swobodnie bez obawy o ścieżkach.

Answer 5

Podejrzewam, że korzystasz z WebPacka? Można wymagać plik settings.scss w pliku twoi app.js coś w tym

require("!style!css!sass!./file.scss"); 

stąd gdy jest skompilowany. Wszystkie twoje komponenty go dostaną. Nie będziesz musiał wymagać tego na każdym z nich.

Answer 6

Jeśli używasz szablonu WebPACK Vue, można go naprawić w jednej linii kodu w build/utils.js: scss: generateLoaders(['css', 'sass?data=@import "~assets/styles/app";'])

Następnie w src/assets/styles/app, dodać wszystkie @imports i voila!

Answer 7

Moje rozwiązanie jest ustawiony folderze plik za settings.scss alias w WebPack,

może settings.scss nie jest globalne zapotrzebowanie, może również potrzebują takiego pliku setting2.scss, ale settings.scss jest konflikt z setting2.scss, ty może tylko wprowadzić plik w tym przypadku.

WebPack config tak:

resolve: { 
    alias: { 
    '~src': path.resolve(__dirname, '../src'), 
    '~styles': path.resolve(__dirname, '../src/styles'), 
} 

więc można importować settings.scss w składniku

<style lang="scss"> 
    @import "~styles/settings.scss"; 
</style> 

Answer 8

I zmagali się z tym samym pytaniem na chwilę. Ale jest naprawdę prosta łatka. Ta funkcja pochodzi z samego węzła.

więc można zadeklarować globalnych SCSS w pliku, powiedzmy globals.scss którego ścieżka jest:

/src/scss/globals.scss 

teraz po prostu można edytować vue-loader config:

loaders: { 
    sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax=1&data=@import "./src/scss/globals"', 
    scss: 'vue-style-loader!css-loader!sass-loader?data=@import "./src/scss/globals";' 
} 

i voila! Masz globale scss dostępne dla wszystkich komponentów vue. Mam nadzieję, że to pomoże!

Aktualizacja:

Wiele ustawienia zostały zaktualizowane w nowych wydaniach Vue. Tak więc powyższe zmiany mogą nie wydawać się trwale w najnowszych projektach Vue. Więc będę krótki, jak to wszystko jest związane jednocześnie:

wersja skrócona:

Znajdź build/utils.js które zawierają metodę (najprawdopodobniej o nazwie cssLoaders()).Ta metoda zwraca obiekt tak:

return { 
    ... 
    sass: generateLoaders('sass', { indentedSyntax: true }), 
    scss: generateLoaders('sass'), 
    ... 
    } 

wystarczy zmienić specyficzną linię scss/sass aby coś takiego:

return { 
    ... 
    sass: generateLoaders('sass', { indentedSyntax: true }), 
    scss: generateLoaders(['css', 'sass?data=@import "~assets/styles/app";']), 
    ... 
    } 

wersja długa:

webpack.base.conf.js zawiera vue-loader w to wyglądałoby mniej więcej tak:

...  
    { 
      test: /\.vue$/, 
      loader: 'vue-loader', 
      options: vueLoaderConfig 
     }, 
    ... 

Zmienna vueLoaderConfig jest importowany z pliku vue-loader.conf.js, który jest równy temu obiektowi:

{ 
     loaders: utils.cssLoaders(Obj), // actual settings coming from cssLoader method of build/utils.js 
     transformToRequire: { 
     //some key value pairs would be here 
     } 
    } 

w build/utils.js pliku znajdziemy metodę cssLoaders() która zwraca: ....

 return { 
     css: generateLoaders(), 
     postcss: generateLoaders(), 
     less: generateLoaders('less'), 
     sass: generateLoaders('sass', { indentedSyntax: true }), 
     scss: generateLoaders('sass'), 
     stylus: generateLoaders('stylus'), 
     styl: generateLoaders('stylus') 
     } 

Po prostu należy zaktualizować powyższy kod zaktualizowaną konfiguracją scss w następujący sposób:

 ... 
     { 
      ... 
      scss: generateLoaders(['css', 'sass?data=@import"~assets/scss/main";']), 
      ... 
     } 
     ... 

W ten sposób zmienne/mixiny zapisane w pliku src/assets/scss/main.scss będą dostępne dla wszystkich składników.