From cf7b943aa0c1838da049751448bcfa2224da14ac Mon Sep 17 00:00:00 2001 From: ktsn Date: Tue, 29 Nov 2016 16:54:02 +0900 Subject: [PATCH 1/5] Expose scss to customize slider style easily --- scripts/rollup.config.js | 34 +++++++++++++++++++------------ scripts/webpack.config.example.js | 5 +++-- src/RangeSlider.vue | 18 ++++++++-------- 3 files changed, 33 insertions(+), 24 deletions(-) diff --git a/scripts/rollup.config.js b/scripts/rollup.config.js index 599bbbf..01427c6 100644 --- 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 index 993c745..173e5b7 100644 --- 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 index b17772e..eb723dd 100644 --- a/src/RangeSlider.vue +++ b/src/RangeSlider.vue @@ -133,17 +133,17 @@ export default { diff --git a/example/main.js b/example/main.js index 1d8e60a..a88a094 100644 --- a/example/main.js +++ b/example/main.js @@ -1,3 +1,5 @@ +import './main.scss' + import Vue from 'vue' import App from './App.vue' diff --git a/example/main.scss b/example/main.scss new file mode 100644 index 0000000..bec1de2 --- /dev/null +++ b/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'; diff --git a/package.json b/package.json index e766ae0..4113fb0 100644 --- a/package.json +++ b/package.json @@ -75,6 +75,7 @@ "rollup-plugin-replace": "^1.1.1", "rollup-plugin-vue": "^2.2.3", "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", From 4c054f7fa028529270110b0129df8c83f48dd3cc Mon Sep 17 00:00:00 2001 From: ktsn Date: Tue, 29 Nov 2016 17:10:44 +0900 Subject: [PATCH 3/5] Apply autoprefixer for example --- package.json | 1 + scripts/webpack.config.example.js | 18 +++++++++++++++++- 2 files changed, 18 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 4113fb0..8fc0550 100644 --- a/package.json +++ b/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", diff --git a/scripts/webpack.config.example.js b/scripts/webpack.config.example.js index 173e5b7..bab0ae4 100644 --- a/scripts/webpack.config.example.js +++ b/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'), @@ -21,10 +29,18 @@ module.exports = { rules: [ { enforce: 'pre', test: /\.scss/, loader: 'sass-loader' }, { test: /\.js$/, loader: 'babel-loader', exclude: /(node_modules|dist)/ }, - { test: /\.s?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' } From dbafbd32f2a851db58f3c23b1fca5810a440ac0b Mon Sep 17 00:00:00 2001 From: ktsn Date: Wed, 30 Nov 2016 09:37:56 +0900 Subject: [PATCH 4/5] Fix rollup-plugin-vue version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 8fc0550..5951465 100644 --- a/package.json +++ b/package.json @@ -74,7 +74,7 @@ "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", From b45dd2fc47ae3f661514e12b698c1b622ecb39b6 Mon Sep 17 00:00:00 2001 From: ktsn Date: Wed, 30 Nov 2016 09:38:43 +0900 Subject: [PATCH 5/5] Create dist dir if not exists when build --- scripts/rollup.config.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/scripts/rollup.config.js b/scripts/rollup.config.js index 01427c6..214a367 100644 --- a/scripts/rollup.config.js +++ b/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']