webpack hot-Modul-Ersatz: css ohne refresh

Ist es nun möglich, angular2, webpack mit hot-Modul-Ersatz, sass sourcemaps und extern geladene css. Es dauerte mich Tage mit ihm spielen, aber ich habe es funktioniert!

Sind die Abhängigkeiten style-loader, css-loader, und sass-loader (bei Verwendung von sass, wenn nicht, die sass-loader kann entfernt werden)

Benutze ich ExtractTextPlugin für die Produktion Modus zu emittieren ist .css-Dateien.

HINWEIS: um dieses Zu erhalten, um zu arbeiten, ich glaube nicht, das stylesUrl Eigentum, sondern ich importieren .scss-Datei außerhalb der @Component decorator so, dass die Stile laden im globalen Kontext eher als Gültigkeitsbereich von Komponente.

Ermöglicht diese Konfiguration für Hot-Modul-Ersatz mit SCSS-Dateien mit webpack dev-server, und extracttextplugin für die Produktion Modus zu emittieren ist .css-Dateien.

Hier ist meine funktionierende config

{
        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
          })
      },

Dann, in Ihre Komponenten, beispielsweise app.component.ts Sie würde erfordern, Ihr app.style.scss Datei AUßERHALB der @Component decorator.

Dass ist der trick. Das wird nicht funktionieren, wenn Sie Last Stile der "Winkel-Weg" mit stylesUrl. Doing es auf diese Art und Weise wird es Ihnen lazy load .css stylesheets für Komponenten, die faul sind geladen, wodurch die anfänglichen Ladezeiten noch schneller.

app.Komponente.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'
})

Hatte ich keine Probleme mit diesem setup. Hier gehen Sie!

Aktualisiert 08/2017: Verbesserte config für webpack 3+ schema Anforderungen, und arbeiten mit Winkel-4 AOT-Kompilierung.

Obwohl ExtractTextPlugin Staaten "Keine Hot-Modul-Ersatz" in seiner README-Sektion, ich behoben, aktualisieren Sie manuell die CSS-Dateien durch die BrowserSync-API.

Ich verwendet Blick zu hören für alle änderungen in meiner CSS-Dateien, und dann verwendet, BrowserSync, Sie zu aktualisieren.

    npm install gaze

Können Sie auch leicht tun, indem Sie Bearbeiten Ihrer build-Skript mit etwas von der folgenden:

  const { Gaze } = require('gaze');

  //Your own BrowserSync init
  browserSync.init({
    ...
  }, resolve);

  //Create a watcher:
  //You can watch/reload specific files according to your build/project structure
  const gaze = new Gaze('**/*.css');
  gaze.on('all', () => bs.reload('*.css'));

Hoffe, das hilft.