example: Add Less file to show multi pre-processors

examples/style-resources/README.md

@@ -1,3 +1,50 @@
 # Using build.styleResources with Nuxt.js
 
-https://nuxtjs.org/examples
+This is usefull when you need to inject some variables and mixins in your pages without having to import them everytime.
+
+Nuxt.js uses https://github.com/yenshih/style-resources-loader to achieve this behaviour.
+
+You need to specify the patterns/path you want to include for the given pre-processors: `less`, `sass`, `scss` or `stylus`
+
+:warning: You cannot use path aliases here (`~` and `@`), you need to use relative or absolute paths.
+
+`nuxt.config.js`:
+
+```js
+{
+  build: {
+    styleResources: {
+      scss: './assets/variables.scss',
+      less: './assets/*.less',
+      // sass: ...,
+      // scss: ...
+      options: {
+        // See https://github.com/yenshih/style-resources-loader#options
+        // Except `patterns` property
+      }
+    }
+  }
+}
+```
+
+Then in your pages, you can use directly:
+
+`pages/index.vue`
+
+```vue
+<template>
+  <div class="main">
+    <p>Page with SCSS</p>
+    <p><nuxt-link to="/less">LESS</nuxt-link></p>
+  </div>
+</template>
+
+<style lang="scss">
+/* ~/assets/variables.scss is injected automatically here */
+.main {
+  background: $main;
+}
+</style>
+```
+
+Thanks to [0pt1m1z3r](https://github.com/0pt1m1z3r) for adding this feature and example.

examples/style-resources/assets/resources.less

@@ -0,0 +1 @@
+@main: orange;

examples/style-resources/nuxt.config.js

@@ -1,9 +1,9 @@
 module.exports = {
   build: {
+    // You cannot use ~/ or @/ here since it's a Webpack plugin
     styleResources: {
-      patterns: [
+      scss: './assets/variables.scss',
-        './assets/resources.scss'
+      less: './assets/*.less'
-      ]
     }
   }
 }

examples/style-resources/package.json

@@ -1,6 +1,8 @@
 {
   "name": "style-resources",
   "dependencies": {
+    "less": "^2.7.3",
+    "less-loader": "^4.0.5",
     "nuxt": "latest"
   },
   "scripts": {

examples/style-resources/pages/index.vue

@@ -1,12 +1,14 @@
-<style lang="scss">
-.main {
-  background: $main;
-}
-</style>
-
 <template>
   <div class="main">
-    <h1>Welcome!</h1>
+    <p>Page with SCSS</p>
-    <p>Background is grey</p>
+    <p><nuxt-link to="/less">LESS</nuxt-link></p>
   </div>
 </template>
+
+<style lang="scss" scoped>
+/* ~/assets/variables.scss is injected automatically here */
+.main {
+  background: $main;
+  padding: 10px;
+}
+</style>

examples/style-resources/pages/less.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="main">
+    <p>Page with LESS</p>
+    <p><nuxt-link to="/">SCSS</nuxt-link></p>
+  </div>
+</template>
+
+<style lang="less" scoped>
+/* ~/assets/*.less are injected automatically here */
+.main {
+  background: @main;
+  padding: 10px;
+}
+a {
+  color: white;
+}
+</style>