add standalone css preprocessors support

Author: egoist

sao.js

@@ -13,6 +13,13 @@ _.cssLoader = config.cssModules ?
   'css-loader?-autoprefixer&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]' :
   'css-loader?-autoprefixer'
 
+_.cssProcessors = [
+  {loader: 'sass-loader?sourceMap', test: /\.scss$/},
+  {loader: 'less-loader?sourceMap', test: /\.less$/},
+  {loader: 'stylus-loader?sourceMap', test: /\.styl$/},
+  {loader: 'sass-loader?indentedSyntax&sourceMap', test: /\.sass$/},
+]
+
 _.outputPath = config.electron ?
   path.join(__dirname, '../app/dist') :
   path.join(__dirname, '../dist')

template/build/utils.js

@@ -16,12 +16,14 @@ base.plugins.push(
   new FriendlyErrors()
 )
 
-// push loader for .css file
-base.module.loaders.push(
-  {
-    test: /\.css$/,
-    loaders: ['style-loader', _.cssLoader, 'postcss-loader']
-  }
-)
+// push loader for css files
+_.cssProcessors.forEach(processor => {
+  base.module.loaders.push(
+    {
+      test: processor.test,
+      loaders: ['style-loader', _.cssLoader, processor.loader]
+    }
+  )
+})
 
 module.exports = base

template/build/webpack.dev.js

@@ -47,12 +47,14 @@ base.plugins.push(
   })
 )
 
-// extract css in standalone .css files
-base.module.loaders.push({
-  test: /\.css$/,
-  loader: ExtractTextPlugin.extract({
-    loader: [_.cssLoader, 'postcss-loader'],
-    fallbackLoader: 'style-loader'
+// extract css in standalone css files
+_.cssProcessors.forEach(processor => {
+  base.module.loaders.push({
+    test: processor.test,
+    loader: ExtractTextPlugin.extract({
+      loader: [_.cssLoader, processor.loader],
+      fallbackLoader: 'style-loader'
+    })
   })
 })