支持样式隔离

.gitignore

@@ -27,3 +27,5 @@ spm_modules
 dist
 build
 assets/**/*.css
+coverage
+package-lock.json

HISTORY.md

@@ -1,3 +1,7 @@
+## 0.3.8
+
+`CHANGED` support js style export
+
 ## 0.3.7
 
 `CHANGED` React 15.x compatibility

package.json

@@ -52,4 +52,4 @@
  },
  "contributors": [],
  "license": "MIT"
-}
+}

src/Carousel.less

@@ -7,6 +7,8 @@
  */
 
 // Default Variables
+@__carouselPrefixCls: kuma-carousel;
+
 @slick-font-path: "./fonts/";
 @slick-font-family: "kuma";
 @slick-loader-path: "./";
@@ -20,8 +22,8 @@
 @slick-opacity-default: 1;
 @slick-opacity-on-hover: 1;
 @slick-opacity-not-active: 0.75;
-@carouselPrefixCls: kuma-carousel;
-.@{carouselPrefixCls} {
+
+.@{__carouselPrefixCls} {
   &:hover {
     .slick-prev,
     .slick-next {
@@ -257,21 +259,21 @@
   }
 }
 
-.@{carouselPrefixCls}-always-show-arrows {
+.@{__carouselPrefixCls}-always-show-arrows {
   /* Arrows */
   .slick-prev,
   .slick-next {
     opacity: 1;
   }
 }
 
-.@{carouselPrefixCls}-dots-centered {
+.@{__carouselPrefixCls}-dots-centered {
   .slick-dots {
     text-align: center;
   }
 }
 
-.@{carouselPrefixCls}-large-mode {
+.@{__carouselPrefixCls}-large-mode {
   .slick-prev,
   .slick-next {
     width: 36px;

style/index.js

@@ -0,0 +1 @@
+import '../src/Carousel.less';

webpack.custom.js

@@ -0,0 +1,19 @@
+const modifyVars = require('kuma-base/jsvars/orange');
+
+/* eslint-disable no-param-reassign */
+module.exports = (config) => {
+  config.module.rules.forEach((rule) => {
+    if (rule.test.toString() === /\.less$/.toString()) {
+      rule.use = [
+        'style-loader',
+        'css-loader',
+        {
+          loader: 'less-loader',
+          options: {
+            modifyVars,
+          },
+        },
+      ];
+    }
+  });
+};