Merge pull request #9 from ktsn/customize-styles

Enable customize style by configuring scss variables

example/App.vue

@@ -43,7 +43,6 @@
 
 <script>
 import RangeSlider from 'vue-range-slider'
-import 'vue-range-slider/dist/vue-range-slider.css'
 
 export default {
   data () {
@@ -61,10 +60,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-.slider {
-  height: 50px;
-  width: 200px;
-}
-</style>

example/main.js

@@ -1,3 +1,5 @@
+import './main.scss'
+
 import Vue from 'vue'
 import App from './App.vue'
 

example/main.scss

@@ -0,0 +1,8 @@
+// customize slider style by changing built-in sass variables
+$slider-height: 50px;
+$slider-width: 200px;
+$rail-height: 5px;
+$rail-color: #e2fae2;
+
+// import built-in sass file
+@import '~vue-range-slider/dist/vue-range-slider.scss';

package.json

@@ -63,6 +63,7 @@
     "node-sass": "^3.10.0",
     "npm-run-all": "^3.0.0",
     "postcss": "^5.2.4",
+    "postcss-loader": "^1.1.1",
     "power-assert": "^1.3.1",
     "rollup": "^0.36.0",
     "rollup-plugin-babel": "^2.6.1",
@@ -73,8 +74,9 @@
     "rollup-plugin-node-globals": "^1.0.7",
     "rollup-plugin-node-resolve": "^2.0.0",
     "rollup-plugin-replace": "^1.1.1",
-    "rollup-plugin-vue": "^2.2.3",
+    "rollup-plugin-vue": "2.2.8",
     "rollup-watch": "^2.5.0",
+    "sass-loader": "^4.0.2",
     "style-loader": "^0.13.1",
     "testcafe": "^0.10.0",
     "testcafe-browser-provider-phantomjs": "^1.0.0",

scripts/rollup.config.js

@@ -8,6 +8,10 @@ const autoprefixer = require('autoprefixer')
 const postcss = require('postcss')
 const meta = require('../package.json')
 
+if (!fs.existsSync('dist')) {
+  fs.mkdirSync('dist')
+}
+
 const prefixer = postcss([
   autoprefixer({
     browsers: ['> 1%', 'last 2 versions', 'IE >= 9']
@@ -30,25 +34,33 @@ const plugins = [
   vue({
     compileTemplate: true,
     css: !process.env.NODE_ENV && (styles => {
-      const out = path.resolve(__dirname, '../dist/vue-range-slider.css')
+      const out = ext => path.resolve(__dirname, '../dist/vue-range-slider.' + ext)
 
-      // sass
-      sass.render({
-        data: styles,
-        outputStyle: 'expanded',
-        outFile: out
-      }, (error, result) => {
+      // save as scss
+      fs.writeFile(out('scss'), styles, error => {
         if (error) {
-          console.error(formatSassError(error))
+          console.error(error)
           return
         }
 
-        // autoprefixer
-        prefixer.process(result.css).then(result => {
-          result.warnings().forEach(warn => {
-            console.warn(warn.toString())
+        // compile scss
+        sass.render({
+          data: styles,
+          outputStyle: 'expanded',
+          outFile: out
+        }, (error, result) => {
+          if (error) {
+            console.error(formatSassError(error))
+            return
+          }
+
+          // autoprefixer
+          prefixer.process(result.css).then(result => {
+            result.warnings().forEach(warn => {
+              console.warn(warn.toString())
+            })
+            fs.writeFile(out('css'), result.css)
           })
-          fs.writeFile(out, result.css)
         })
       })
     })

scripts/webpack.config.example.js

@@ -1,4 +1,12 @@
 const path = require('path')
+const webpack = require('webpack')
+const autoprefixer = require('autoprefixer')
+
+const postcss = [
+  autoprefixer({
+    browsers: ['> 1%', 'last 2 versions', 'IE >= 9']
+  })
+]
 
 module.exports = {
   context: path.resolve(__dirname, '../example'),
@@ -13,17 +21,26 @@ module.exports = {
       'node_modules'
     ],
     alias: {
-      'vue-range-slider/dist/vue-range-slider.css': 'vue-range-slider.css',
+      'vue-range-slider/dist/vue-range-slider.scss': 'vue-range-slider.scss',
       'vue-range-slider': 'vue-range-slider.cjs.js'
     }
   },
   module: {
     rules: [
+      { enforce: 'pre', test: /\.scss/, loader: 'sass-loader' },
       { test: /\.js$/, loader: 'babel-loader', exclude: /(node_modules|dist)/ },
-      { test: /\.css$/, loader: 'style-loader!css-loader' },
+      { test: /\.s?css$/, loader: 'style-loader!css-loader!postcss-loader' },
       { test: /\.vue$/, loader: 'vue-loader' }
     ]
   },
+  plugins: [
+    new webpack.LoaderOptionsPlugin({
+      test: /\.s?css$/,
+      options: {
+        postcss
+      }
+    })
+  ],
   devServer: {
     contentBase: './example'
   }

src/RangeSlider.vue

@@ -133,17 +133,17 @@ export default {
 </script>
 
 <style lang="scss">
-$slider-height: 20px;
-$slider-width: 130px;
-$rail-height: 4px;
-$knob-size: 20px;
+$slider-height: 20px !default;
+$slider-width: 130px !default;
+$rail-height: 4px !default;
+$knob-size: 20px !default;
 
-$rail-color: #e2e2e2;
-$rail-fill-color: #21fb92;
-$knob-color: #fff;
+$rail-color: #e2e2e2 !default;
+$rail-fill-color: #21fb92 !default;
+$knob-color: #fff !default;
 
-$knob-border: 1px solid #f5f5f5;
-$knob-shadow: 1px 1px rgba(0, 0, 0, 0.2);
+$knob-border: 1px solid #f5f5f5 !default;
+$knob-shadow: 1px 1px rgba(0, 0, 0, 0.2) !default;
 
 .range-slider {
   display: inline-block;