feat: add support css import in config

Author: alexandrdrvn

package.json

@@ -1,11 +1,14 @@
 {
     "name": "vuefront-nuxt",
-    "version": "0.3.13",
+    "version": "0.3.15",
     "description": "vuefront-nuxt",
     "repository": {
         "type": "git",
         "url": "https://github.com/vuefront/vuefront-nuxt.git"
     },
+    "scripts": {
+        "yalc-watch": "nodemon -e vue,js,scss,json -x 'yalc push'"
+    },
     "files": [
         "src",
         "types"
@@ -18,16 +21,19 @@
     "typings": "types/index.d.ts",
     "peerDependencies": {},
     "dependencies": {
-        "@types/node": "^14.0.10",
+        "@types/node": "^14.0.27",
         "apollo-boost": "^0.4.9",
         "cookie-universal": "^2.1.4",
-        "graphql": "^15.0.0",
+        "glob-all": "^3.2.1",
+        "graphql": "^15.3.0",
         "isomorphic-fetch": "^2.2.1",
-        "lodash": "^4.17.15",
+        "lodash": "^4.17.19",
+        "nodemon": "^2.0.4",
+        "sass-resources-loader": "^2.0.3",
         "vue": "^2.6.11",
-        "vue-apollo": "^3.0.3",
         "vue-graphql-loader": "^0.3.3",
-        "vue-i18n": "^8.18.1",
-        "vuefront": "^0.3.10"
-    }
+        "vue-i18n": "^8.20.0",
+        "vuefront": "^0.3.12"
+    },
+    "devDependencies": {}
 }

src/index.js

@@ -2,11 +2,14 @@ import setupRoutes from './setupRoutes'
 import setupConfig from './setupConfig'
 import setupBuild from './setupBuild'
 import setupImages from './setupImages'
+const glob = require('glob-all')
 const path = require('path')
 const _ = require('lodash')
 const ampify = require('./plugins/ampify')
 
 export default async function vuefrontModule(_moduleOptions) {
+  const resolver = (this.nuxt.resolver || this.nuxt)
+
   const moduleOptions = { ...this.options.vuefront, ..._moduleOptions }
 
   const theme = process.env.VUEFRONT_THEME || 'default'
@@ -146,6 +149,53 @@ export default async function vuefrontModule(_moduleOptions) {
     setupBuild.call(this, moduleOptions, themeOptions);
   })
 
+  const extendWithSassResourcesLoader = matchRegex => resources => (config) => {
+    // Yes, using sass-resources-loader is **intended here**
+    // Despite it's name it can be used for less as well!
+    const sassResourcesLoader = {
+      loader: 'sass-resources-loader', options: { resources }
+    }
+  
+    // Gather all loaders that test against scss or sass files
+    const matchedLoaders = config.module.rules.filter(({ test = '' }) => {
+      return test.toString().match(matchRegex)
+    })
+  
+    // push sass-resources-loader to each of them
+    matchedLoaders.forEach((loader) => {
+      loader.oneOf.forEach(rule => rule.use.push(sassResourcesLoader))
+    })
+  }
+
+  const retrieveStyleArrays = styleResourcesEntries =>
+  styleResourcesEntries.reduce((normalizedObject, [key, value]) => {
+    const wrappedValue = Array.isArray(value) ? value : [value]
+    normalizedObject[key] = wrappedValue.reduce((acc, path) => {
+      const possibleModulePath = resolver.resolveModule(path)
+
+      if (possibleModulePath) {
+        // Path is mapped to module
+        return acc.concat(possibleModulePath)
+      }
+      // Try to resolve alias, if not possible join with srcDir
+      path = resolver.resolveAlias(path)
+      // Try to glob (if it's a glob
+      path = glob.sync(path)
+      // Flatten this (glob could produce an array)
+      return acc.concat(path)
+    }, [])
+    return normalizedObject
+  }, {})
+
+  const styleResourcesEntries = Object.entries({scss: Object.values(themeOptions.cssImport)})
+
+  const {scss} = retrieveStyleArrays(styleResourcesEntries)
+
+  const extendScss = extendWithSassResourcesLoader(/scss/)
+
+  this.extendBuild(extendScss(scss))
+
+
   this.extendBuild((config, { isServer }) => {
     const { rules } = config.module
 

src/plugin.js

@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import VueI18n from 'vue-i18n'
-import VueApollo from 'vue-apollo'
+
 import ApolloClient from "apollo-boost";
 import _ from 'lodash'
 import 'isomorphic-fetch'
@@ -13,7 +13,7 @@ const baseURL = process.browser
 
 export const init = (ctx, inject) => {
   const client = new ApolloClient({
-      uri: baseURL,
+    uri: baseURL,
       headers: {
         accept: 'application/json; charset=UTF-8',
         'content-type': 'application/json; charset=UTF-8'
@@ -63,7 +63,6 @@ export const init = (ctx, inject) => {
         });
       }
     });
-    Vue.use(VueApollo)
 
     inject('vfapollo', client)
 }