🏗 Change style architecture

Author: QRaimbault

README.md

@@ -20,6 +20,8 @@
 
 A lightweight Vue.js starter.  
 
+**YOU CAN READ THIS DOC IN A MORE FRIENDLY WAY [HERE](https://qraimbault.github.io/vue-js-starter-scss/#/).**  
+
 - [Vue.JS Starter](#vuejs-starter)
   - [Summary](#summary)
   - [Built-in modules](#built-in-modules)
@@ -135,13 +137,8 @@ The store is accessible from any component/view using `this.$store`.
 
 ## Style
 
-All your style should be located in the `src/scss` directory.
-
-There is 3 sub-directories:
-
-- `global` for your reset, mixins, variables, functions.
-- `views` for your view specific styles.
-- `components` for your components specific styles.
+All you view/component specific styles should be placed in a file named exactly like the component, in the same directory.
+You can place project-specific style in `src/scss` and import it from the component specific styles (see example in `src/components/Index).
 
 You should import styles in the `<script>` tag in each component.
 
@@ -192,9 +189,8 @@ Webpack allows to put some aliases in the webpack config, so you can have shorte
 - `@API` pointing to `src/helpers/API.js`, so directly to the configured Axios instance
 - `@Config` pointing to `src/config.js`
 - `@Component` pointing to `src/components`
-- `@ComponentStyle` pointing to `src/scss/components`
 - `@View` pointing to `src/views`
-- `@ViewStyle` pointing to `src/scss/views`
+- `@MasterStyle` pointing to `src/scss/master.scss`
 - `@Asset` pointing to `src/assets`
 - `@` pointing to `src`
 

docs/README.md

@@ -20,8 +20,6 @@
 
 A lightweight Vue.js starter.  
 
-**YOU CAN READ THIS DOC IN A MORE FRIENDLY WAY [HERE](https://qraimbault.github.io/vue-js-starter-scss/#/).**  
-
 - [Vue.JS Starter](#vuejs-starter)
   - [Summary](#summary)
   - [Built-in modules](#built-in-modules)
@@ -137,13 +135,8 @@ The store is accessible from any component/view using `this.$store`.
 
 ## Style
 
-All your style should be located in the `src/scss` directory.
-
-There is 3 sub-directories:
-
-- `global` for your reset, mixins, variables, functions.
-- `views` for your view specific styles.
-- `components` for your components specific styles.
+All you view/component specific styles should be placed in a file named exactly like the component, in the same directory.
+You can place project-specific style in `src/scss` and import it from the component specific styles (see example in `src/components/Index).
 
 You should import styles in the `<script>` tag in each component.
 
@@ -194,9 +187,8 @@ Webpack allows to put some aliases in the webpack config, so you can have shorte
 - `@API` pointing to `src/helpers/API.js`, so directly to the configured Axios instance
 - `@Config` pointing to `src/config.js`
 - `@Component` pointing to `src/components`
-- `@ComponentStyle` pointing to `src/scss/components`
 - `@View` pointing to `src/views`
-- `@ViewStyle` pointing to `src/scss/views`
+- `@MasterStyle` pointing to `src/scss/master.scss`
 - `@Asset` pointing to `src/assets`
 - `@` pointing to `src`
 

jsconfig.json

@@ -7,8 +7,7 @@
       "@Config": ["src/config.js"],
       "@Component/*": ["src/components/*"],
       "@View/*": ["src/views/*"],
-      "@ViewStyle/*": ["src/scss/views/*"],
-      "@ComponentStyle/*": ["src/scss/components/*"],
+      "@MasterStyle": ["src/scss/master.scss"],
       "@Asset/*": ["src/assets/*"],
       "@/*": ["src/*"]
     }

src/components/Index/Articles.scss

@@ -0,0 +1,11 @@
+@import "@MasterStyle";
+
+.list {
+  &__title {
+    color: $article-title-color;
+  }
+
+  &__content {
+    color: $article-content-color;
+  }
+}

…ponents/Index/__tests__/Articles.spec.js src/components/Index/Articles.spec.jssrc/components/Index/__tests__/Articles.spec.js renamed to src/components/Index/Articles.spec.js src/components/Index/__tests__/Articles.spec.js renamed to src/components/Index/Articles.spec.js

@@ -1,5 +1,5 @@
 import { shallow } from 'vue-test-utils'
-import Articles from '../Articles.vue';
+import Articles from 'Articles.vue';
 
 describe('Articles.vue', () => {
   const articles = [
@@ -9,7 +9,7 @@ describe('Articles.vue', () => {
     },
     {
       title: 'test2', 
-      body: 'test fz content'
+      body: 'test content'
     }];
   it('Displays Title', () => {
     const wrapper = shallow(Articles, {

src/components/Index/Articles.vue

@@ -1,17 +1,19 @@
 <template>
-  <div class="article">
-    <ul>
+  <div>
+    <ul class="list">
       <li 
         v-for="(article, index) in articles" 
         :key="index">
-        <h2>{{ article.title }}</h2>
-        <p>{{ article.body }}</p>
+        <h2 class="list__title">{{ article.title }}</h2>
+        <p class="list__content">{{ article.body }}</p>
       </li>
     </ul>
   </div>
 </template>
 
 <script>
+import "./Articles.scss";
+
 export default {
   name: "Articles",
   props: {