调整 scss 代码，增加 scss 构建

internals/webpack/webpack.base.babel.js

@@ -4,6 +4,7 @@
 
 const path = require('path');
 const webpack = require('webpack');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
 
 module.exports = (options) => ({
   entry: options.entry,
@@ -12,12 +13,15 @@ module.exports = (options) => ({
     publicPath: '/',
   }, options.output), // Merge with env dependent settings
   module: {
-    loaders: [{
+    rules: [
+    {
       test: /\.js$/, // Transform all .js files required somewhere with Babel
-      loader: 'babel-loader',
+      use: 'babel-loader',
       exclude: /node_modules/,
       query: options.babelQuery,
-    }, {
+    },
+
+    {
       // Do not transform vendor's CSS with CSS-modules
       // The point is that they remain in global scope.
       // Since we require these CSS files in our JS or CSS files,
@@ -25,25 +29,44 @@ module.exports = (options) => ({
       // So, no need for ExtractTextPlugin here.
       test: /\.css$/,
       include: /node_modules/,
-      loaders: ['style-loader', 'css-loader'],
-    }, {
+      use: ['style-loader', 'css-loader'],
+    },
+
+    {
+      test: /\.scss$/,
+      loader: ExtractTextPlugin.extract({
+        loader: ['css-loader?sourceMap', 'sass-loader?sourceMap']
+        // loader: ['css-loader?sourceMap', 'postcss-loader', 'sass-loader']
+      })
+      // use: ['style-loader', 'css-loader?sourceMap', 'postcss-loader', 'sass-loader']
+    },
+
+    {
       test: /\.(eot|svg|ttf|woff|woff2)$/,
-      loader: 'file-loader',
-    }, {
+      use: 'file-loader',
+    },
+
+    {
       test: /\.(jpg|png|gif)$/,
-      loaders: [
+      use: [
         'file-loader',
         'image-webpack?{progressive:true, optimizationLevel: 7, interlaced: false, pngquant:{quality: "65-90", speed: 4}}',
       ],
-    }, {
+    },
+
+    {
       test: /\.html$/,
-      loader: 'html-loader',
-    }, {
+      use: 'html-loader',
+    },
+
+    {
       test: /\.json$/,
-      loader: 'json-loader',
-    }, {
+      use: 'json-loader',
+    },
+
+    {
       test: /\.(mp4|webm)$/,
-      loader: 'url-loader?limit=10000',
+      use: 'url-loader?limit=10000',
     }],
   },
   plugins: options.plugins.concat([
@@ -60,6 +83,13 @@ module.exports = (options) => ({
         NODE_ENV: JSON.stringify(process.env.NODE_ENV),
       },
     }),
+
+    new ExtractTextPlugin({
+      filename: 'bundle.css',
+      disable: false,
+      allChunks: true,
+    }),
+
     new webpack.NamedModulesPlugin(),
   ]),
   resolve: {

package.json

@@ -132,6 +132,7 @@
     "expect": "1.20.2",
     "expect-jsx": "2.6.0",
     "exports-loader": "0.6.3",
+    "extract-text-webpack-plugin": "^2.0.0-beta.4",
     "file-loader": "0.9.0",
     "html-loader": "0.4.4",
     "html-webpack-plugin": "2.24.0",
@@ -151,13 +152,16 @@
     "lint-staged": "3.2.0",
     "mocha": "3.1.2",
     "ngrok": "2.2.3",
+    "node-sass": "^3.13.1",
     "null-loader": "0.1.1",
     "offline-plugin": "3.4.2",
     "plop": "1.5.0",
+    "postcss-loader": "^1.2.1",
     "pre-commit": "1.1.3",
     "psi": "2.0.4",
     "react-addons-test-utils": "15.3.2",
     "rimraf": "2.5.4",
+    "sass-loader": "^4.1.1",
     "shelljs": "0.7.5",
     "sinon": "2.0.0-pre",
     "style-loader": "0.13.1",

src/app.js

@@ -22,7 +22,8 @@ import { useScroll } from 'react-router-scroll';
 import configureStore from './store';
 
 // Import the CSS reset, which HtmlWebpackPlugin transfers to the build folder
-import 'sanitize.css/sanitize.css';
+// import 'sanitize.css/sanitize.css';
+import 'styles/index.scss';
 
 // Create redux store with history
 // this uses the singleton browserHistory provided by react-router

src/styles/checks.scss

-@import "components/variables";
-
 #mobile_checks_index {
   .checks {
     i.anticon-file {

src/styles/common.scss

-@import "components/variables";
-
 * {
   &.ik-container-background {
     background-color: $ikmd-color-t5;

src/styles/dashboard.scss

-@import "components/variables";
-
 #mobile_dashboard_index,
 #mobile_home_index {
   .document-list {

src/styles/documents.scss

-@import "common";
-@import "components/variables";
-
 .common-document {
   overflow: hidden;
 

src/styles/ikmd.scss

-/* IK Mobile Design
- * ========================================================================== */
-
-@import "components/variables";
-
 /* Common Class */
 .ikmd-display-flex {
   display: -webkit-box;
@@ -562,8 +557,8 @@
       }
 
       .ikmd-filter-bar-category-button {
-        @extend .ik-word-break;
-
+        word-break: break-all;
+        word-wrap: break-word;
         position: relative;
         height: 40px;
         padding-left: #{$ikmd-space-base}px;

src/styles/index.scss

+@import 'components/variables';
+@import "./common";
+@import "./actionsheet";
+@import "./checks";
+@import "./dashboard";
+@import "./documents";
+@import "./help";
+@import "./ikmd";
+@import "./product_categories";
+@import "./product_items";
+@import "./products";
+@import "./purchase_orders";
+@import "./purchases";
+@import "./sale_orders";
+@import "./search";
+@import "./serial_codes";
+@import "./storageios";
+@import "./suppliers";
+@import "./table";
+@import "./warehouses";
\ No newline at end of file

src/styles/order_items.scss

-// Place all the styles related to the mobile/order_items controller here.
-// They will automatically be included in application.css.
-// You can use Sass here: http://sass-lang.com/

src/styles/sales.scss

-// Place all the styles related to the mobile/sales controller here.
-// They will automatically be included in application.css.
-// You can use Sass here: http://sass-lang.com/

src/styles/search.scss

-@import "components/variables";
-
 .ik-search {
   @extend .ik-container-background;
 

src/styles/storage_transfers.scss

-// Place all the styles related to the mobile/storage_transfers controller here.
-// They will automatically be included in application.css.
-// You can use Sass here: http://sass-lang.com/

src/styles/warehouses.scss

-@import "components/variables";
-
 #mobile_warehouses_index {
   .warehouses {
     i.anticon-file {