terra

Terra - Application

Dependencies:

• webpack
• sass-loader

Add modulePaths to your webpack.config.js:

const modulePaths = Object.keys(require("./package.json")["dependencies"])
  .reduce(function(paths, module) { return paths.concat(require(module).includePaths) }, []);

Set sass-loader's includePaths to modulePaths in webpack.config.js:

sassLoader: {
  includePaths: modulePaths
}

Set resolve root to modulePaths in webpack.config.js:

  resolve: {
    root: modulePaths
  }

Require terra-application JS assets:

require ("terra-application");

Require terra-application Sass assets:

@import 'terra-application';

Example package.json:

{
  "dependencies": {
    "terra-application": "file:../terra-application"
  },
  "devDependencies": {
    "css-loader": "^0.23.0",
    "extract-text-webpack-plugin": "^1.0.0",
    "node-sass": "^3.7.0",
    "sass-loader": "^3.2.0",
    "style-loader": "^0.13.0",
    "webpack": "^1.13.0"
  },
  "scripts": {
    "webpack": "webpack"
  },
  "private": true
}

Example webpack.config.js:

const path = require("path");
 
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');
 
const isDevelopmentEnv = !process.env.RAILS_ENV || process.env.RAILS_ENV === 'development';
 
const modulePaths = Object.keys(require('./package.json')['dependencies'])
  .reduce(function(paths, module) { return paths.concat(require(module).includePaths) }, []);
 
const config = {
  entry: {
    application: path.join(__dirname, 'app', 'assets', 'webpack')
  },
  output: {
    path: path.join(__dirname, 'public', 'assets'),
    filename: isDevelopmentEnv ? '[name].js' : '[name]-[hash].js',
    publicPath: '/assets/'
  },
  resolve: {
    root: modulePaths
  },
  module: {
    loaders: [
      {
        test: /\.scss$/,
        loader: ExtractTextWebpackPlugin.extract('style', 'css!sass')
      }
    ]
  },
  plugins: [ new ExtractTextWebpackPlugin(isDevelopmentEnv ? '[name].css' : '[name]-[hash].css') ],
  sassLoader: {
    includePaths: modulePaths
  }
};
 
module.exports = config;

Example entry file:

// app/assets/webpack.js
 
require('./stylesheets/application.scss');
require('./javascripts/application.js');