Webpack - export SASS files (.scss)

Question

I have a package and I want to export my SASS variables to other packages using it. Currently, all of my .scss files are compiled and placed in the /dist/main.css file. My webpack configuration:

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")
  ]
};

My goal is to create a package like bootstrap-sass.

Answer 1

I highly recommend using webpack-mergeto separate your Sass configuration to make it easier to use with other packages. For your current configuration, I would do three things:

• Add webpack-mergeto your project ( npm i --save-dev webpack-merge).

• Sass , - webpack.sass-config.js. :

  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.
  

• webpack.config.js :

  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;
  

, Sass. webpack-merge, . Survive JS - , Webpack.