webentwicklung-frage-antwort-db.com.de

webpack sass-loader generiert keine CSS-Datei

Ich kann nicht herausfinden, wie man eine CSS-Datei mit dem Webpack-Sass-Loader rendert.

So sieht meine webpackconfig.js aus:

module.exports = {
  context: __dirname + "/app",
  entry: {
    javascript: "./app.js",
    html: "./index.html"
  },


  output: {
    filename: "app.js",
    path: __dirname + "/dist"
  },


  module: {
    loaders: [
      //JAVASCRIPT
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loaders: ["babel-loader"],
      },

      //Index HMTML
      {
        test: /\.html$/,
        loader: "file?name=[name].[ext]",
      },
      //Hotloader
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loaders: ["react-hot", "babel-loader"],
      },

      // SASS
      {
        test: /\.scss$/,
        loader: 'style!css!sass'
      }

    ],
  }

}

Wie Sie sehen, verwende ich den in der Dokumentation angegebenen Sass-Loader-Modul-Loader.

  {
    test: /\.scss$/,
    loader: 'style!css!sass'
  }

Meine Wurzel sieht so aus:

Project Root:
  app:
    style.scss
  dist:
   ?????? WTF is my css file??
  webpack.config.js

Ich kann alles andere wie html und jsx babble loaders zum Laufen bringen ... Ich tippe einfach webpack in die Kommandozeile ein und die Dinge passieren.

Ich mache etwas falsch mit dem Sass Loader. Was ist es? Bitte helfen.

36
PAT-O-MATION

Sie verwenden den style-loader, der Ihr CSS standardmäßig in Javascript einbettet und zur Laufzeit einfügt.

Wenn Sie in Ihrem Javascript echte CSS-Dateien anstelle von CSS verwenden möchten, sollten Sie die Variable ExtractTextPlugin verwenden.

Eine grundlegende Konfiguration wäre:

  1. Fügen Sie var ExtractTextPlugin = require('extract-text-webpack-plugin'); oben in Ihre Webpack-Konfigurationsdatei ein.

  2. Fügen Sie Ihrer Webpack-Konfiguration Folgendes hinzu:

    plugins: [
        new ExtractTextPlugin('[name].css'),
    ]
    
  3. Ändern Sie Ihre SASS-Loader-Konfiguration wie folgt:

    {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract(
            'style-loader', // backup loader when not building .css file
            'css-loader!sass-loader' // loaders to preprocess CSS
        )
    }
    

Das bedeutet, dass Sie das gesamte CSS, das es in Ihrem Bundle finden kann, in eine separate Datei extrahieren. Der Name basiert auf dem Namen Ihres Eingangspunkts, der in Ihrem Fall javascript.css (aus dem Eintragsteil Ihrer Konfiguration) ergibt.

Der ExtractTextPlugin.extract- loader wird vom Plugin verwendet, um das CSS in Ihrem Code zu finden und in separaten Dateien abzulegen. Der erste Parameter, den Sie ihm geben, ist der Loader, auf den er zurückgreifen sollte, wenn er zum Beispiel auf Dateien in einem asynchronen Modul stößt. Im Allgemeinen ist dies so ziemlich immer style-loader. Der zweite Parameter teilt dem Plugin mit, welche Loader zur Verarbeitung des CSS verwendet werden sollen, in diesem Fall css-loader und sass-loader, aber auch Dinge wie postcss-loader werden häufig verwendet.

Weitere Informationen zum Erstellen von CSS mit Webpack finden Sie hier: https://webpack.github.io/docs/stylesheets.html#separate-css-bundle

55
Ambroos

Als ich mit TypeScript auf ein ähnliches Problem stieß, entdeckte ich, dass der Import der 'scss'-Datei in der Indexdatei sein sollte, mit der Webpack beginnt.

Importieren Sie in index.ts und nicht in einem inneren Modul.

0
Dror Weiss