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.
spróbuj '@import '~/@ materiał/elewacja/mdc-elewacja';' – sobolevn
@sobolevn To też nie działa. Jednak przykład przyłączony importuje go za pomocą '@ material/elevation/mdc-elevation', więc powinno to również działać w jakiś sposób. – 22samuelk
Spójrz na ten prosty przykład: https://github.com/wemake-services/vue-material-button/blob/master/src/components/MaterialButton.vue#L72 – sobolevn