Jak poprawnie zaimportować zewnętrzny SCSS za pomocą pakietu internetowego i Vue.js?

Question

Jak przykład materiał składowy internetowym, chcę móc importować SCSS z mojego node_modules tak:

@import '@material/elevation/mdc-elevation'; 

Jednak ja dostaję ten komunikat o błędzie podczas próby uruchomienia kompilacji WebPACK:

File to import not found or unreadable: @material/elevation/mdc-elevation. 

@import './~/@material/elevation/mdc-elevation.scss'; też nie działa.

Jestem prawie pewien, że problem jest gdzieś w mojej konfiguracji, ale nie mogę się dowiedzieć, gdzie.

Co zrobili w Material Components Web za Vue.js example, aby działało?

Oto mój npm-debug.log w razie potrzeby. A oto odpowiadające repozytorium Git: sk22/spg-tinf-sem03/proj01

Z góry dziękuję!

Edytuj: Chcę móc importować pliki scss, a nie skompilowane css.

Answer 1

Rozumiem.

tu jest częścią mojego WebPack 2 config na module.rules:

{ 
    test: /\.(sass|scss)$/, 
    use: [ 
    'style-loader', 
    'css-loader', 
    { 
     loader: 'sass-loader', 
     options: { 
     includePaths: [path.resolve(__dirname, 'node_modules')], 
     }, 
    }, 
    ], 
}, 

Więc co zrobiłem źle? Mój obiekt options został umieszczony bezpośrednio w regule, a nie w programie ładującym.

Stara zasada config WebPack wyglądał następująco:

{ 
    test: /\.(sass|scss)$/, 
    use: ['style-loader', 'css-loader', 'sass-loader'], 
    options: { includePaths: [path.resolve(__dirname, './node_modules')] }, 
}, 

Zobacz różnicę? Zamiast łańcucha "loader", rozszerzyłem go na obiekt zawierający nazwę loader i obiekt options, ponieważ options dotyczy tylko sass-loader.

(Można również upuścić path.resolve i pisać tylko „node_modules”, ale może to być bezpieczniej go opuścić.)

Sprawdź tę stronę dokumentacji dla dalszych informacji. https://webpack.js.org/configuration/module/#rule-use

Bez tego programu ładującego należy poprzedzić każdy import za pomocą ~, który to pakiet sieci Web zostanie przekonwertowany na folder node_modules, przynajmniej w mojej poprzedniej konfiguracji. Ale to spowoduje złamanie frameworków SCSS innych firm, takich jak Material Components Web, ponieważ używają one instrukcji @import bez wiodącego użytkownika, np. .

Wewnątrz plików .vue

To nie będzie działać w plikach .vue, jak vue-loader prostu wykorzystuje Sass-ładowarka bez opcji domyślnie. Jeśli chcesz, aby to działało, prawdopodobnie będziesz musiał skorzystać z własnych opcji vue-loader, zgodnie z opisem in its documentation.

(jestem w stanie zmusić go do pracy z jakiegoś powodu nie wiem ...)

Answer 2

miałem ten sam problem z @material i Vue. Udało mi się rozwiązać problem bez bezpośredniego dostosowywania właściwości use.

Rozwiązanie

Krok 1: Najpierw utwórz domyślny Vue 2.1 projektu przy użyciu interfejsu CLI. Twoja struktura plików będzie mieć katalog ./build.

Krok 2: Otwórz plik „utils” widać cssLoaders() funkcję, która zwraca obiekt/mapę dla języków vue-loader podporach.

Na tej mapie widoczne będą zarówno sass, jak i scss.

Krok 3: Zmiana wartości sass i scss do:

sass: generateLoaders('sass', { 
    indentedSyntax: true, 
    includePaths: [path.resolve(__dirname, '../node_modules')] 
    }), 
    scss: generateLoaders('sass', { 
    includePaths: [path.resolve(__dirname, '../node_modules')] 
}), 

Krok 4: Przejdź do pliku .vue używasz i zmienić atrybut lang w elemencie <style> do albo sass lub scss.

Krok 5: Po co zrobiłeś, że udać się do terminalu/konsoli i zainstalować sass-loader z:

KMP zainstalować węzeł-Sass Sass-ładowarka WebPack flagą --save-dev

Krok 6: Następnie uruchom npm run dev i powinno działać.

Dlaczego to działa?

Biblioteki

I wykopali wokół trochę i okazuje się sass-loader wykorzystuje node-sass który ma kilka opcji, takich jak includePaths jeden wymienionych przez @ 22samuelk. IncludePaths informuje węzeł-sass lub raczej bazową bibliotekę, aby zawierała pliki sass z tego katalogu/ścieżki.

Vue

opcje Sass-ładowarka

Domyślnie Vue spodziewa swoje aktywa, aby być w projektach src/assets folderu (poprawcie mnie jeśli się mylę). Możesz jednak użyć ~, aby wskazać, że chcesz zacząć od katalogu głównego projektu, który wyglądałby tak: `~/node_modules/@material/smth/mdc-smth.scss.

Teraz, jeśli chcesz, aby twój sass-loader używał czegoś innego niż te opcje, musisz je jawnie powiedzieć.

Stąd path.resolve(__dirname, '../node_modules' ponieważ plik utils jest w ./build i trzeba użyć ścieżki bezwzględnej dla sass-loader zrozumieć, gdzie szukać.

Vue-ładowarka config

Nie jest to specyficzne dla pytanie, ale config vue-ładowarki określonej w vue-loader.conf.js działa następująco:

Wykorzystuje mapę zwrócony przez cssLoaders() budować ładowarki oczekiwane przez pakiet sieciowy. Zwrócona mapa ({key:value}) jest następnie używana przez podanie key jako rozszerzenia pliku używanego w obiekcie test: dla obiektu modułu ładującego. Obiekt value jest używany jako obiekt ładujący. Która chciałaby tak:

{ 
    test: /\.(key)$/, 
    use: [ 
    { 
    loader: '//ld//-loader', 
    options: { 
     /*Options passed to generateLoaders('//ld//', options)*/ 
    }, 
    }, 
], 
} 

Gdzie key jest extention pliku. W takim przypadku będzie to sass lub scss. I //ld// to ładowarka, której chcesz użyć. Które pokazano w Step 3 jako .

Mam nadzieję, że to wyczyści kilka rzeczy. Zajęło mi to trochę czasu, ponieważ właśnie zacząłem używać Vue.