[AngularJS + Webpack] Requiring CSS & Preprocessors

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

}