Merge pull request #2172 from 0pt1m1z3r/style-resources-loader

Style resources loader

examples/style-resources/README.md

@@ -0,0 +1,3 @@
+# Using build.styleResources with Nuxt.js
+
+https://nuxtjs.org/examples

examples/style-resources/assets/resources.scss

@@ -0,0 +1 @@
+$main: #ccc;

examples/style-resources/nuxt.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  build: {
+    styleResources: {
+      patterns: [
+        './assets/resources.scss'
+      ]
+    }
+  }
+}

examples/style-resources/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "style-resources",
+  "dependencies": {
+    "nuxt": "latest"
+  },
+  "scripts": {
+    "dev": "nuxt",
+    "build": "nuxt build",
+    "start": "nuxt start"
+  },
+  "devDependencies": {
+    "node-sass": "^4.7.2",
+    "sass-loader": "^6.0.6"
+  }
+}

examples/style-resources/pages/index.vue

@@ -0,0 +1,12 @@
+<style lang="scss">
+.main {
+  background: $main;
+}
+</style>
+
+<template>
+  <div class="main">
+    <h1>Welcome!</h1>
+    <p>Background is grey</p>
+  </div>
+</template>

lib/builder/webpack/style-loader.js

@@ -56,10 +56,20 @@ export default function styleLoader(ext, loaders = [], isVueLoader = false) {
     })
   }
 
+  // https://github.com/yenshih/style-resources-loader
+  let styleResourcesLoader
+  if (this.options.build.styleResources) {
+    styleResourcesLoader = {
+      loader: 'style-resources-loader',
+      options: this.options.build.styleResources
+    }
+  }
+
   return [
     vueStyleLoader,
     cssLoader,
     postcssLoader,
-    ...loaders
+    ...loaders,
+    styleResourcesLoader
   ].filter(l => l)
 }

package.json

@@ -108,6 +108,7 @@
     "server-destroy": "^1.0.1",
     "source-map": "^0.6.1",
     "source-map-support": "^0.5.0",
+    "style-resources-loader": "^0.3.0",
     "uglifyjs-webpack-plugin": "^1.0.1",
     "url-loader": "^0.6.2",
     "vue": "^2.5.6",