2015-07-09 22 views
9

Mam dość skomplikowaną konfigurację ładowarka arkuszy stylów:Aliasy modułu ładującego pakiety WWW?

{ 
    test: /\.scss$/, 
    loader: ExtractTextPlugin.extract("style", 
     "css?sourceMap&localIdentName=[path][name]__[local]__[hash:base64:5]!sass?outputStyle=expanded&" + 
     "includePaths[]=" + other stuff) 
    ) 
    } 

który działa świetnie, ale na niektóre wymaga Chcę dodać opcję do CSS-ładowarki modules, tak by to wyglądać tak:

require('./foo.scss!css?modules&sourceMap&localIdentName=[path][name]__[local]__[hash...'); 

Ale nie mogę tego zrobić w każdym miejscu.

Jak mogę to skonfigurować, aby móc włączyć flagę modułów css-loader dla pewnych wymagań, zachowując resztę tego samego?

Może coś w rodzaju "alias" programu ładującego, np. require('./foo.scss!my-scss-with-modules-flag-alias')?

Jedyne rozwiązanie, jakie mogę sobie wyobrazić, to napisanie programu ładującego, który wykonuje transformację składni, aby wstawić konfigurację programu ładującego do pewnych wywołań wymagających ... ale to jest krucha i skomplikowana.

+0

jak można powiedzieć te przypadki od siebie? Czy alias modułu do rozwiązywania problemów działa dla Ciebie? W takim przypadku zrobiłbyś coś w stylu 'require ('with-modules! ./ foo.scss')' dla każdego przypadku specjalnego. –

+0

To wydaje się działać, dziękuję! – FakeRainBrigand

+0

OK, przestawię to jako odpowiedź. –

Odpowiedz

15

resolveLoader.alias będzie działać tutaj. To znaczy.

resolveLoader: { 
    alias: { 
     'with-modules': 'loader definition goes here', 
    } 
} 

Stosując tę ​​konfigurację można zrobić po prostu

require('with-modules!./foo.scss'); 

w kodzie.

+2

Jak doszło do tego rozwiązania? Webpack jest niesamowity, bug Mam problem z dokumentacją ... –

+1

Cóż, tworzę książki związane z webpackem, więc to jest moja praca, żeby wiedzieć o tych rzeczach. Dodałem notatkę o tym do dokumentacji, której wcześniej brakowało. Zgadzam się, że dokumentacja może być nieco nieprzejrzysta. –

+1

@ JuhoVepsäläinen: Czy możesz rozwinąć swoją odpowiedź. Co by się znalazło w definicji? Jeśli spróbuję utworzyć alias z "style! Css? Modules! Postcss", pojawia się błąd: Nie można rozpoznać modułu 'style! Css'. –

1

Funkcja resolveLoader.alias może działać w danym przypadku, ponieważ używa się wtyczki jako programu ładującego. Jeśli jednak chcesz użyć łańcucha ładowarek, nie będzie działać. (Jest na nim żądanie funkcji: https://github.com/webpack/webpack/issues/2772).

Zamiast tego można dodać parametr do pliku w rachunku wymaga

var styles = require('./foo.scss?modules'); 

i utworzyć nową regułę ładowarka:

module: { 
    loaders: [ 
     ... 
     { test: /\.scss$/, loader: 'style!css!postcss!sass' }, 
     { test: /\.scss\?modules$/, loader: 'style!css?modules!postcss!sass' } 
    ] 
} 
+0

Nie można uruchomić tego przy użyciu Webpack 3. Zawsze wybierał pierwszy program ładujący tak, jakby ignorował parametry zapytania. – Ryall