标签：
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"; } } }) }
[AngularJS + Webpack] Requiring CSS & Preprocessors
标签：
原文地址：http://www.cnblogs.com/Answer1215/p/4792735.html
