WebPACK SASS ładowarka nie może DeDupe wspólne importu SCSS

Question

Mam następującą strukturę:

node_modules 
    - my_component 
    - font 
    - scss 
     - my_component.scss 
src 
    - my_app.js 
    - my_app.scss 

próbuję zaimportować style my_component.scss. Ten plik zawiera deklaracje @font-face z odniesieniami do ../font/. Więc coś takiego:

// my_component.scss 
@font-face { 
    font-family: 'Helvetica Neue'; 
    font-weight: $weight-medium; 
    src: url('../font/font-file.eot'); 
} 

W my_app.js jestem wymagająca plik SCSS z nim związane. Więc

// my_app.js 

require('./my_app.scss'); 

//other app-specific code 

jestem my_app.scss, jestem importowania my_component.scss:

// my_app.scss 

import 'my_component'; 

i sassConfig jest ustawiony do node_modules/my_component/scss rozwiązać tak, że roboty importu.

Moja konfiguracja programu ładującego używa sass-loader, i css-loader. Oto fragment:

//loaders.js 

loaders.push({ 
    test: /\.scss$/, 
    loader: 'style!css?sourcemap!resolve-url!sass?sourceMap' 
}); 

Oto co obserwować:

1. Kiedy biegnę webpack-dev-server, odniesienia url rozwiązać poprawnie
2. Jednak, gdy biegnę webpack z tego samego pliku conf, otrzymuję Module not found: Error: Cannot resolve 'file' or 'directory' ../font/font-file.ttf w src/font/

Rzeczy próbowałem:

1. Korzystanie zmienną $font-path odnieść się do ../fonts i ustawienie go na node_modules/my_components/font
2. Sprawdzanie kolejność moich ładowarek, aktualizując swoją wersję WebPACK itp

Aktualizacja

My sassLoader config poprzednio miała konfigurację dla node-sass-import-once. Kiedy go usunąłem, moje adresy URL czcionek zaczęły się ponownie rozwiązywać, jednak mój wygenerowany CSS zawiera mnóstwo duplikatów stylów.

węzeł-sass wielokrotnie importuje każdy @import, nie wykonując żadnego dedupingu (wiem, że nie powinien być w stanie zrobić tego sam). Ale node-sass-import-once, który jest przeznaczony do tego rodzaju rzeczy, łamie resolve-url-loader.

Oto moje pytania:

1. Dlaczego node-Sass-import-raz złamać determinacji URL-ładowarka WebPACK?
2. Czy istnieje sposób na odrzucenie importowanego pakietu Web Pack i uzyskanie wygenerowanego CSS bez duplikowania stylu?

Answer 1

Nie widząc konfiguracji twojego WebPacka mogę tylko zgadywać, ale wygląda na to, że próbujesz zaimportować plik CSS z node_modules.

Aby zaimportować CSS z node_modules, konieczne może być użycie ~. Jak sam sokra mówi w this issue:

css @import jest względny do bieżącego katalogu. Aby rozwiązać "jak moduł", możesz przedrostkiem ~.

Być może coś takiego jak @import `~module/my_component.scss`; może załatwić sprawę.

import Rozwiązywanie ten sposób rozwiązano również problem miałem gdzie x.css było wymagane przez x.js i importowane przez y.css gdy x.css importowanego trochę Sass zmiennej config. Korzystanie resolve.alias w WebPACK config może po prostu zrobić coś takiego:

// webpack.config.js 
resolve: { 
    alias: { 
    styles: 'src/styles/' 
    } 
} 

a następnie użyć tyldy importować:

// y.css 
@import `~styles/x.scss 

Jeżeli działa to wtedy nie trzeba usunąć node-sass-import-once i wszystko powinno rozwiązać poprawnie .