SCSS und CSS in einer einzigen Datei Mit WebPack

Question

Ich bin ein Neuling auf webpack und ich habe Schwierigkeiten zu verstehen, wie ich ein paar SCSS Dateien und CSS-Dateien nehmen und kombiniere sie mit webpack Kombination (Nach dem sass transpiling Na sicher).

Mit Schluck, war es wirklich offensichtlich, wie ich die transpile die sass zu CSS 1 Schritt haben kann und dann ein Schritt nach, dass sie miteinander verketten. Aber mit Webpack sieht alles wie zur gleichen Zeit aus.

Dies ist eine ziemlich grundlegende Anforderung, dass ich bin sicher, dass eine offensichtliche Antwort auf diejenigen, die mehr erlebt hat.

Ich habe zu dem Punkt, wo ich erfolgreich eine transpiled scss zu CSS ausgeben und separat eine CSS-Datei aus CSS-Eingabe ausgeben kann, aber ich kann nicht herausfinden, wie Sie sie zusammen mit Webpack.

Unten ist mein webpack.config.js Datei:

const path = require('path'); 
 
const webpack = require('webpack'); 
 

 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 
 

 
const extractCSS = new ExtractTextPlugin('extractedCSS.css'); 
 

 
const extractSass = new ExtractTextPlugin({ 
 
    filename: "extractedSASS.css", 
 
    disable: process.env.NODE_ENV === "development" 
 
}); 
 

 
module.exports = function (env) { 
 
    return { 
 
     context: path.resolve(__dirname, './wwwroot/app'), 
 
     entry: { 
 
      main: './index.js', 
 
      vendor: 'moment' 
 
     }, 
 
     output: { 
 
      filename: '[name].[chunkhash].js', 
 
      path: path.resolve(__dirname, './wwwroot/mytempdist') 
 
     }, 
 
     module: { 
 
      rules: [{ 
 
       test: /\.css$/, 
 
       use: extractCSS.extract({ 
 
        use: 'css-loader' 
 
       }) 
 
      }, 
 
      { 
 
       test: /\.scss$/, 
 
       use: extractSass.extract({ 
 
        use: [{ 
 
         loader: "css-loader" 
 
        }, { 
 
         loader: "sass-loader" 
 
        }], 
 
        // use style-loader in development 
 
        fallback: "style-loader" 
 
       }) 
 
      } 
 
      ] 
 
     }, 
 
     plugins: [ 
 
      new webpack.optimize.CommonsChunkPlugin({ 
 
       name: 'vendor', 
 
       minChunks: function (module) { 
 
        // this assumes your vendor imports exist in the node_modules directory 
 
        return module.context && module.context.indexOf('node_modules') !== -1; 
 
       } 
 
      }), 
 
      //CommonChunksPlugin will now extract all the common modules from vendor and main bundles 
 
      new webpack.optimize.CommonsChunkPlugin({ 
 
       name: 'manifest' //But since there are no more common modules between them we end up with just the runtime code included in the manifest file 
 
      }), 
 
      //new webpack.optimize.UglifyJsPlugin({ 
 
      // sourceMap: options.devtool && (options.devtool.indexOf("sourcemap") >= 0 || options.devtool.indexOf("source-map") >= 0) 
 
      //}), 
 
      extractSass, 
 
      extractCSS 
 
     ], 
 
     devtool: 'inline-source-map' 
 
    } 
 
}

Wie kann ich den oben ändern, um sowohl die Sass und CSS gehen in die Datei CSS-Ausgabedatei?

Incase es einen Unterschied macht, ist unten ein Auszug aus der Liste meiner index.js Datei (Einstiegspunkt) toastr ist ein npm Paket und das Tempo ist nur eine normale heruntergeladen CSS-Datei:

var toastr = require('toastr'); 
 
import 'toastr/toastr.scss'; 
 

 
import pace from './../lib/pace/pace.min.js'; 
 
import './../lib/pace/pace.css';

Answer 1

Sie haben zwei Instanzen von ExtractTextPlugin mit expliziten Namen definiert und Sie verwenden, um diese separaten Instanzen jeweils CSS und SCSS Dateien zu laden.

Was Sie brauchen, ist nur 1 Instanz des Plug-ins, die alle die CSS und nur eine Regel für beide SCSS und CSS-Dateien ansammeln.

{ 
    test: /\.s?css$/, 
    use: ExtractTextPlugin.extract({ 
     fallback: 'style-loader', 
     use: ['css-loader', 'sass-loader'] 
    }) 
} 

Dies wird sowohl SCSS und CSS-Dateien verarbeiten und sie alle in einer einzigen Ausgabe CSS-Datei setzen.