styles

Author: danielabar

README.md

@@ -16,6 +16,7 @@
     - [Vue Component](#vue-component)
     - [.Vue Files](#vue-files)
     - [ES6 Transpiling](#es6-transpiling)
+    - [Styles](#styles)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
@@ -222,3 +223,24 @@ npm install [email protected] [email protected] [email protected] babel-preset
 Update [.eslintrc.js](.eslintrc.js) to include babel eslint parser.
 
 Finally configure babel with [.babelrc](.babelrc). This specifies for babel NOT to use modulesl because that's being handled by webpack.
+
+### Styles
+
+For this course, will use something smaller than Bootstrap, instead will use [Bulma](https://bulma.io/documentation/columns/basics/).
+
+```shell
+npm install [email protected] --save
+```
+
+Then add `<style></style>` tag to [Layout.vue](src/theme/Layout.vue)
+
+This tag accepts a lang attribute to indicate what to use to pre-process css (scss or stylus).
+(same is true for script and template tags, for example could have `lang="coffee"` to use CoffeeScript).
+
+For this course, will use sass `<style lang="scss">...</style>`.
+
+Will need to add appropriate loader to webpack config to parse styles, and install deps:
+
+```shell
+npm install [email protected] [email protected] [email protected] --save-dev
+```

build/webpack.base.config.js

@@ -13,10 +13,14 @@ const config = {
         loader: 'eslint-loader',     // using eslint-loader
         exclude: /node_modules/      // do not lint node_modules folder
       },
-      // vue
+      // vue + css + sass
       {
         test: /\.vue$/,
-        loader: 'vue-loader'
+        loader: 'vue-loader',
+        options: {
+          css: 'css-loader',
+          'scss': 'css-loader|sass-loader'
+        }
       },
       // babel
       // NOTE: no check for .vue files because this rule runs AFTER vue-loader converts .vue files to .js