globalnie importuj plik rysika z pakietem internetowym - webpack, vuejs2, webpack-2, webpack-style-loader

Rozpocząłem nowy projekt z vue2 z „vue init webpack my-project” Używam rysika do stylizacji. Jak dotąd tak dobrze, wszystko się kompiluje.

Ale teraz chcę mieć osobny plik zmienne. Styl, który powinien być globalny.

Oznacza to, że nie chcę używać „@import („ names.styl ”)” w każdym pliku .styl, który mam w mojej aplikacji. Szukałem przez 2 godziny i nie mogłem znaleźć nic dobrego.

Ze względu na długość tego postu nie będę tutaj kopiować-wklejać zawartości plików pakietu webpack. Ale podam ci ten link: Kliknij Jest to katalog „build” w moim projekcie, który zawiera pliki pakietu

Polecenie to „build / node-server.js”

Odpowiedzi:

dotyczy to aplikacji vue utworzonych za pomocą vue-cli <3

Według rysik, możesz to osiągnąć przekazując cię variables.styl ścieżka pliku do modułu ładującego rysik poprzez import opcja, sugeruję utworzenie nowego folderu styles w środku src katalog zawierający wszystkie twoje globalne pliki rysików (zmienne, mixiny, ...), a następnie przekaż tę ścieżkę katalogu do opcji importu.

• w build/util.js przed blokiem zaczynając od

  return {
  css: generateLoaders(),
  ...
  

  zdefiniuj zmienną var stylesDir = path.resolve(__dirname, "../src/styles") pozwoli to zaoszczędzić wiele kłopotów później.

• teraz poszukaj linii, która mówi stylus: generateLoaders("stylus") i przekaż to {import: [stylesDir+"/*.styl"]} jako drugi argument do generateLoaders funkcjonować.

  to powinno wyglądać stylus: generateLoaders("stylus", {import: [stylesDir+"/*.styl"]})