Możliwe jest teraz użycie angular2, opakowania internetowego z wymianą gorącego modułu, sass sourcaaps i zewnętrznego css. Daje mi to wiele dni zabawy, ale udało mi się to zrobić!
zależności są style-loader, css-loader i sass-loader (w przypadku korzystania Sass, jeśli nie, to ładowarka Sass może być usunięty)
użyć ExtractTextPlugin w sposobie wytwarzania emitują odpowiednie pliki .css.
UWAGA: Aby to działało, nie używam właściwości stylesUrl, zamiast tego importuję plik .scss poza dekorator @ Component, aby style ładowały się w kontekście globalnym, a nie były ograniczone przez komponent.
Ta konfiguracja umożliwia wymianę modułu Hot z plikami SCSS przy użyciu serwera Webpack, a extracttextplugin w trybie produkcyjnym do emisji rzeczywistych plików .css.
Oto mój config roboczego
{
test: /\.(scss)$/,
use:
isDevServer ? [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: { sourceMap: true }
},
{
loader: 'postcss-loader',
options: { postcss: [AutoPrefixer(autoPrefixerOptions)], sourceMap: true }
},
{
loader: 'sass-loader',
options: { sourceMap: true }
},
{
loader: 'sass-resources-loader',
options: {
resources: [
'./src/assets/styles/variables.scss',
'./src/assets/styles/mixins.scss']
}
},
/**
* The sass-vars-loader will convert the 'vars' property or any module.exports of
* a .JS or .JSON file into valid SASS and append to the beginning of each
* .scss file loaded.
*
* See: https://github.com/epegzz/sass-vars-loader
*/
{
loader: '@epegzz/sass-vars-loader?',
options: querystring.stringify({
vars: JSON.stringify({
susyIsDevServer: susyIsDevServer
})
})
}] : // dev mode
ExtractTextPlugin.extract({
fallback: "css-loader",
use: [
{
loader: 'css-loader',
options: { sourceMap: true }
},
{
loader: 'postcss-loader',
options: { postcss: [AutoPrefixer(autoPrefixerOptions)], sourceMap: true }
},
{
loader: 'sass-loader',
options: { sourceMap: true }
},
{
loader: 'sass-resources-loader',
options: {
resources: [
'./src/assets/styles/variables.scss',
'./src/assets/styles/mixins.scss']
}
}, {
loader: '@epegzz/sass-vars-loader?',
options: querystring.stringify({
vars: JSON.stringify({
susyIsDevServer: susyIsDevServer
})
// // Or use 'files" object to specify vars in an external .js or .json file
// files: [
// path.resolve(helpers.paths.appRoot + '/assets/styles/sass-js-variables.js')
// ],
})
}],
publicPath: '/' // 'string' override the publicPath setting for this loader
})
},
Następnie w składniku, na przykład, app.component.ts, byś wymagać swój app.style.scss plików poza dekoratora @Component.
To jest podstęp. To nie zadziała, jeśli style "kątowe" zostaną wczytane z stylesUrl. Wykonanie tego w ten sposób pozwoli ci leniwym wczytać arkusze stylów dla składników, które są leniwie załadowane, dzięki czemu czas ładowania jest jeszcze szybszy.
app.component.css
/*
* THIS IS WHERE WE REQUIRE CSS/SCSS FILES THAT THIS COMPONENT NEEDS
*
* Function: To enable so-called "Lazy Loading" CSS/SCSS files "on demand" as the app views need them.
* Do NOT add styles the "Angular2 Way" in the @Component decorator ("styles" and "styleUrls" properties)
*/
import './app.style.scss'
/**
* AppComponent Component
* Top Level Component
*/
@Component({
selector: 'body',
encapsulation: ViewEncapsulation.None,
host: { '[class.authenticated]': 'appState.state.isAuthenticated' },
templateUrl: './app.template.html'
})
miałem żadnych problemów z systemem tej konfiguracji. Proszę bardzo!
Aktualizacja 08/2017: Poprawa config dla WebPacka 3+ wymagania schematu, a do pracy z kątowe 4 AOT kompilacji.
Stworzyłem https://github.com/sheerun/extracted-loader, aby rozwiązać ten problem. – sheerun