Making your CSS modular is a difficult thing to do, but using Webpack makes this so much easier. By adding a single line to your Webpack config, you can require you CSS, Stylus, Less, etc. files right from your directives and keep everything together.

 

Install:

npm install -D style-loader css-loader stylus-loader

 

webpack.config.js:

'style!css' means compile css first then style. The webpack read from right to left.

So 'style!css!stylus': compile stylus, then css, final style.

module.exports = {    entry: {        app: ['./app/index.js']    },    output: {        path: './build',        filename: 'bundle.js'    },    module: {        loaders: [            {test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/},            {test: /\.html$/, loader: 'html-loader', exclude: /node_modules/},            {test: /\.css$/, loader: 'style!css', exclude: /node_modules/},            {test: /\.css$/, loader: 'style!css!stylus', exclude: /node_modules/}        ]    }};

 

export default (ngModule) => {    ngModule.directive('hello',  () => {        require('./hello.css');        return {            restrict: 'E',            scope: {},            template: require('./hello.html'),            controllerAs: 'vm',            controller: function() {                var vm = this;                vm.greeting = "Hello";            }        }    })}