feat(loaders): support for Sass and LESS with CSS Modules

satya164 · Jun 11, 2016 · 49fc356 · 49fc356
1 parent 4315f3b
commit 49fc356
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 13 deletions.
diff --git a/package.json b/package.json
@@ -29,6 +29,7 @@
   "author": "Satyajit Sahoo <satyajit.happy@gmail.com> (https://github.com/satya164/)",
   "license": "MIT",
   "dependencies": {
+    "autoprefixer": "^6.3.6",
     "babel-loader": "^6.2.4",
     "babel-plugin-transform-react-constant-elements": "^6.9.1",
     "babel-plugin-transform-react-inline-elements": "^6.8.0",
@@ -42,6 +43,8 @@
     "babel-runtime": "^6.9.2",
     "chalk": "^1.1.3",
     "cheerio": "^0.20.0",
+    "css-loader": "^0.23.1",
+    "file-loader": "^0.8.5",
     "glob-expand": "^0.2.0",
     "json-loader": "^0.5.4",
     "koa": "^1.2.0",
@@ -50,25 +53,31 @@
     "koa-static": "^2.0.0",
     "koa-webpack-dev-middleware": "^1.2.1",
     "koa-webpack-hot-middleware": "^1.0.3",
+    "less": "^2.7.1",
+    "less-loader": "^2.2.3",
     "lodash": "^4.13.1",
     "memory-fs": "^0.3.0",
     "ncp": "^2.0.0",
+    "node-sass": "^3.7.0",
     "opn": "^4.0.2",
+    "postcss-loader": "^0.9.1",
     "radium": "^0.17.1",
     "react": "^15.1.0",
     "react-dom": "^15.1.0",
     "react-redux": "^4.4.5",
     "react-router": "^2.4.1",
     "react-router-redux": "^4.0.5",
     "redux": "^3.5.2",
+    "sass-loader": "^3.2.0",
+    "style-loader": "^0.13.1",
+    "url-loader": "^0.5.7",
     "webpack": "^2.1.0-beta.13",
     "yargs": "^4.7.1"
   },
   "devDependencies": {
     "ava": "^0.15.2",
     "babel-cli": "^6.10.1",
     "babel-eslint": "^6.0.4",
-    "css-loader": "^0.23.1",
     "cz-conventional-changelog": "^1.1.6",
     "del": "^2.2.0",
     "del-cli": "^0.2.0",
@@ -77,13 +86,8 @@
     "eslint-plugin-babel": "^3.2.0",
     "eslint-plugin-import": "^1.8.1",
     "eventsource": "^0.2.1",
-    "file-loader": "^0.8.5",
     "mkdirp": "^0.5.1",
-    "node-sass": "^3.7.0",
-    "sass-loader": "^3.2.0",
-    "semantic-release": "^4.3.5",
-    "style-loader": "^0.13.1",
-    "url-loader": "^0.5.7"
+    "semantic-release": "^4.3.5"
   },
   "ava": {
     "babel": "inherit"

diff --git a/src/configure-webpack.js b/src/configure-webpack.js
@@ -1,8 +1,14 @@
 import path from 'path';
 import webpack from 'webpack';
+import autoprefixer from 'autoprefixer';
 import babelrc from './babelrc';
 
 const CURRENTDIR = path.join(__dirname, '..');
+const BABEL_LOADER = 'babel-loader?' + JSON.stringify(babelrc);
+const CSS_LOADER = 'css-loader?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]';
+const SASS_LOADER = 'sass-loader?sourceMap';
+const LESS_LOADER = 'less-loader?sourceMap';
+const STYLE_LOADERS = [ 'style-loader', CSS_LOADER, 'postcss-loader' ];
 
 export const extensions = [ '', '.web.js', '.js' ];
 
@@ -12,6 +18,10 @@ export default (options) => ({
     output: options.output,
     devtool: options.devtool,
 
+    postcss() {
+        return [ autoprefixer ];
+    },
+
     plugins: [
         new webpack.NoErrorsPlugin(),
         new webpack.DefinePlugin({
@@ -38,13 +48,28 @@ export default (options) => ({
             {
                 test: /\.js$/,
                 exclude: /node_modules/,
-                loader: 'babel-loader?' + JSON.stringify(babelrc),
+                loader: BABEL_LOADER,
+            },
+            {
+                test: /\.json$/,
+                loader: 'json',
+            },
+            {
+                test: /\.css$/,
+                loaders: STYLE_LOADERS,
+            },
+            {
+                test: /\.less$/,
+                loaders: [ ...STYLE_LOADERS, LESS_LOADER ],
+            },
+            {
+                test: /\.scss$/,
+                loaders: [ ...STYLE_LOADERS, SASS_LOADER ],
+            },
+            {
+                test: /\.(gif|jpg|png|webp|svg)$/,
+                loader: 'url?limit=25000',
             },
-            { test: /\.json$/, loader: 'json' },
-            { test: /\.css$/, loaders: [ 'style', 'css' ] },
-            { test: /\.sass$/, loaders: [ 'style', 'css', 'sass?indentedSyntax' ] },
-            { test: /\.scss$/, loaders: [ 'style', 'css', 'sass' ] },
-            { test: /\.(gif|jpg|png)$/, loader: 'url?limit=25000' },
         ]
     },