From f54ab3153170798d7e12e8bab21d8a4b5ef43701 Mon Sep 17 00:00:00 2001
From: EGOIST <0x142857@gmail.com>
Date: Sat, 19 Nov 2016 13:47:46 +0800
Subject: [PATCH] Create using-css-frameworks.md

---
 docs/using-css-frameworks.md | 35 +++++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)
 create mode 100644 docs/using-css-frameworks.md

diff --git a/docs/using-css-frameworks.md b/docs/using-css-frameworks.md
new file mode 100644
index 0000000..cd1d77c
--- /dev/null
+++ b/docs/using-css-frameworks.md
@@ -0,0 +1,35 @@
+# CSS frameworks
+
+You may intend to load CSS files from Bootstrap, Bulma.css, Element-UI, there're various ways to do this:
+
+## Option 1. load in JavaScript files
+
+```js
+import '/path/to/file.css'
+// or commonjs
+require('/path/to/file.css')
+
+// if you're loading something like `file.scss`
+// be sure to add sass-loader in webpack config for `.scss` files
+import '/path/to/file.scss'
+```
+
+## Option 2. load in single file component
+
+This way is way more easier, since you don't need to modify webpack config, just installing the relevant loaders is enough.
+
+```vue
+<style src="/path/to/file.css"></style>
+
+<!-- or sass with sass-loader and node-sass installed -->
+<style src="/path/to/file.scss" lang="sass"></style>
+
+<!-- for example, loading sass files and update variables in bulma css framework -->
+<style lang="sass">
+$blue: #72d0eb;
+$pink: #ffb3b3;
+$family-serif: "Georgia", serif;
+
+@import "~bulma";
+</style>
+```