Webpack - Export SASS (.scss) Dateien

Question

Ich habe ein Paket, und ich möchte exportieren meine SASS-Variablen in andere Pakete verwenden Sie es. Momentan werden alle .scss-Dateien kompiliert und in die Datei /dist/main.css gestellt. Mein webpack config:

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

module.exports = { 
    entry: ['./src/index.js'], 
    module: { 
    loaders: [ 
     { 
     test: /\.jsx?$/, 
     exclude: /node_modules/, 
     loader: 'babel' 
     }, 
     { 
     test: /\.(scss|sass|css)$/, 
     loader: ExtractTextPlugin.extract("style", "css!sass") 
     }, 
     { 
     test: /\.(png|woff|woff2|eot|ttf|svg)$/, 
     loader: 'url-loader?limit=10000&name=fonts/[hash].[ext]' 
     }, 
     { 
     test: /\.scss$/, loader: 'style!css!sass!sass-resources' 
     } 
    ] 
    }, 
    resolve: { 
    extensions: ['', '.js', '.jsx'] 
    }, 
    output: { 
    path: __dirname + '/build', 
    publicPath: '/', 
    filename: 'index.js', 
    library: 'Supernova', 
    libraryTarget: 'umd' 
    }, 
    externals: { 
    'react': 'react', 
    'react-dom': 'react-dom' 
    }, 
    plugins: [ 
    new ExtractTextPlugin("[name].css") 
    ] 
}; 

Mein Ziel ist es, ein Paket wie bootstrap-sass zu erstellen.

Answer 1

Ich empfehle dringend, webpack-merge zu verwenden, um Ihre Sass-Konfiguration zu trennen, um es für andere Pakete einfach zu machen, es zu verwenden. Für Ihre aktuelle Konfiguration, würde ich drei Dinge tun:

1. hinzufügen webpack-merge zu einem Projekt (npm i --save-dev webpack-merge).

2. Setzen Sie Ihre Sass-Konfiguration in eine separate Datei, etwa so etwas wie webpack.sass-config.js. Haben sie gehören die folgenden:

   var ExtractTextPlugin = require('extract-text-webpack-plugin'); 
   
   exports.config = function(options) { 
       return { 
       module: { 
        loaders: [ 
        { 
         test: /\.(scss|sass|css)$/, 
         loader: ExtractTextPlugin.extract("style", "css!sass") 
        }, 
        { 
         test: /\.scss$/, loader: 'style!css!sass!sass-resources' 
        } 
        ] 
       }, 
       plugins: [ 
        new ExtractTextPlugin("[name].css") 
       ] 
       } 
   } 
   
   // Side note: returning a function instead of a plain object lets 
   // you pass optional parameters from your main config file. This 
   // is useful if you want to make something like your compiled css 
   // file name different for another Webpack project without having 
   // to edit your Sass configuration file. 
   

3. Aktualisieren Sie Ihre webpack.config.js auf die folgenden:

   var merge = require('webpack-merge'); 
   
   // import your separated Sass configuration 
   var sassConfig = require('webpack.sass-config'); 
   
   // Define your common config for entry, output, JSX, fonts, etc. 
   var common = { 
       entry: ['./src/index.js'], 
       module: { 
       loaders: [ 
        { 
        test: /\.jsx?$/, 
        exclude: /node_modules/, 
        loader: 'babel' 
        }, 
        { 
        test: /\.(png|woff|woff2|eot|ttf|svg)$/, 
        loader: 'url-loader?limit=10000&name=fonts/[hash].[ext]' 
        } 
       ] 
       }, 
       resolve: { 
       extensions: ['', '.js', '.jsx'] 
       }, 
       output: { 
       path: __dirname + '/build', 
       publicPath: '/', 
       filename: 'index.js', 
       library: 'Supernova', 
       libraryTarget: 'umd' 
       }, 
       externals: { 
       'react': 'react', 
       'react-dom': 'react-dom' 
       } 
   }; 
   
   // Merge your common config and Sass config 
   var config = merge(
       common, 
       sassConfig.config() 
   ); 
   
   // Export the merged configuration 
   modules.exports = config; 
   

Offensichtlich ist dies Ihre Sass Config weit über das hinausgehen kann einfach. Ich verwende webpack-merge, um meine Entwicklungskonfiguration von meiner Produktionskonfiguration zu trennen. This article auf Survive JS ist eine großartige Ressource für die optimale Nutzung Ihres Webpack-Setups.