Expose scss to customize slider style easily

ktsn · Nov 29, 2016 · cf7b943 · cf7b943
1 parent 36cd77a
commit cf7b943
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 24 deletions.
diff --git a/scripts/rollup.config.js b/scripts/rollup.config.js
@@ -30,25 +30,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)
         })
       })
     })

diff --git a/scripts/webpack.config.example.js b/scripts/webpack.config.example.js
@@ -13,14 +13,15 @@ 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' },
       { test: /\.vue$/, loader: 'vue-loader' }
     ]
   },

diff --git a/src/RangeSlider.vue b/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;