Webpack include foundation framework and app scss compiling to css

Question

I want to add sass compilation to my project and compiling my app.scss file including foundation-sites styles.

I have project structure like this:

-frontend
   -node_modules
   -src
      -css
      -scss
      -js
      index.html
   package.json
   webpack.config.js

I installed foundation framework by npm. I want to create app.scss file in my scss directory, import there foundation framework and compile this to css/app.css which is linked in my app index.html

Here is my webpack configuration:

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');

module.exports = {
  context: path.join(__dirname, "src"),
  devtool: debug ? "inline-sourcemap" : null,
  entry: "./js/index.js",
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015', 'stage-0'],
          plugins: ['react-html-attrs', 'transform-decorators-legacy', 'transform-class-properties'],
        }
      }
    ]
  },
  output: {
    path: __dirname + "/src/",
    filename: "index.min.js"
  },
  plugins: debug ? [] : [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
  ],
}; 

I installed sass-loader, style-loader and css-loader to my packages, but I have no idea how to include this process properly in webpack.

Many many thanks for help with this.

Answer 1

You are definitely on the right track. First off, be sure that you a version off a sass library installed. I personally use node-sass with webpack projects. More info here. about node-sass.

Also in order to compile your scss to a css folder you are going to need to use the webpack extract-text-webpack-plugin, info here.

Require the plugin at the top of your config:

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

Once you have the plugin installed, can use set up your loader like this:

 module: {
    loaders: [
       {
         test: /\.jsx?$/,
         exclude: /(node_modules|bower_components)/,
         loader: 'babel-loader',
         query: {
           presets: ['react', 'es2015', 'stage-0'],
           plugins: ['react-html-attrs', 'transform-decorators-legacy', 'transform-class-properties'],
          }
        },
        { 
         test: /\.scss$/, 
         loader: ExtractTextPlugin.extract("style-loader","css-loader!sass-loader"),
        }
     ]
   },

And your plugin like this:

  plugins: debug ? [] : [
    new webpack.optimize.DedupePlugin(),
    new ExtractTextPlugin("./css/[name].css"),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
   ],

From here, all you have to do is require your main scss file in your entry js file, which in your case is index.js. Something Like this:

require('./path/to/app.scss');

As for the foundation aspect I would look into this https://www.npmjs.com/package/foundation-sites-loader. It looks promising.