Jak wyodrębnić wiele arkuszy stylów kompozycji za pomocą pakietu internetowego?

Question

Próbuję uczynić aplikację React tematyczną. Na razie tematy składają się tylko z różnych zestawów zmiennych sass, które definiują różne kolory nagłówka, itp.

Z mojego obecnego rozumowania ExtractTextPlugin wydaje się być moim najlepszym zakładem, ponieważ nie chcę, aby moje style były wbudowane i mają raczej oddzielne pliki na temat.

Więc stworzyłem dwa tematy:

src/scss/themes/theme-a.scss 
src/scss/themes/theme-b.scss 

Tematyka importować podstawowy układ i wspólne style i zastąpić odpowiednie zmienne.

Ale jedynym sposobem udało mi się zrobić WebPack tworzyć oddzielne pliki CSS dla obu tematów było stworzenie odrębne punkty wejścia dla każdego tematu w mój webpack.prod.config:

entry: { 
    app: './src/js/init.js', 
    theme-a: './src/scss/themes/theme-a.scss', 
    theme-b: './src/scss/themes/theme-b.scss' 
}, 

Ale dodanie nowego punktu wejścia dla każdego nowy motyw, który zostanie dodany, czuje się źle i myślę, że musi być lepszy sposób?

Answer 1

oto rozwiązanie:

npm i --save-dev file-loader 

W sekcji loaders, dodać to:

{ 
    test: /themes\/.+\.scss$/, 
    loader: "file-loader?name=./compiled-themes/css/[name].css!css!sass" 
}, 

Nie mogą być plikami więcej SCSS, jeśli więc nie musi być inny fragment który grupuje je jak zwykle, ale pomija motywy:

{ 
    test: /\.scss$/, 
    exclude: /themes\/.+\.scss$/, 
    loader: "css!sass" 
}, 

Program ładujący zapisuje pliki według nazwy pliku, hash a Rozszerzenie nd, dzięki czemu możesz zachować nazwę.

Uwaga część name=./compiled-themes/css/[name].css, gdzie zastępuje się [] vars.

https://github.com/webpack/file-loader

Answer 2

Aby uniknąć konieczności ręcznego dodawania motywów, jednym z możliwych rozwiązań jest utworzenie funkcji, która odczytuje zawartość folderu motywów i programowo dodaje pozycję dla każdego pliku * .scss.

Coś wzdłuż linii to:

function getThemes(themePath) { 
    var themes = {}; 
    fs.readdirSync(themePath).forEach(function(fileName) { 
     var fileNameWithPath = path.join(themePath, fileName); 

     var stat = fs.lstatSync(fileNameWithPath); 
     if (stat.isDirectory()) return; 
     if (!/\.scss$/.test(fileName)) return; 

     var nameWithoutExt = path.basename(fileName, '.scss'); 
     themes[nameWithoutExt] = fileNameWithPath; 
    }); 

    return themes; 
} 

var themes = getThemes('./src/scss/themes'); 

var config= { 
    entry: _.merge({ app: './src/js/init.js' }, themes), 
    // rest of options 
}; 

To będzie wymagać ponownego uruchomienia dev-serwer lub ponownie uruchomić ty WebPack budowania podczas dodawania nowego motywu plikach chociaż, ale przynajmniej nie będzie miał dotknąć konfiguracji komputera.