feat: auto detect style loader

nuxt-community · Dec 12, 2020 · 2e4fd08 · 2e4fd08
1 parent 3950c70
commit 2e4fd08
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 1 deletion.
diff --git a/lib/module.js b/lib/module.js
@@ -9,12 +9,20 @@ const AMPBoilerplate = '<style amp-boilerplate>body{-webkit-animation:-amp-start
 const scriptPattern = /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi
 const ampBodyPattern = /<amp-body[^>]*>([.\S\s]*)<\/amp-body>/
 
+const styleLoaders = [
+  {
+    test: /\.scss$/i,
+    loader: '!sass-loader'
+  }
+]
+
 module.exports = function (moduleOptions) {
   const { nuxt } = this
   const options = {
     cdnBase: undefined,
     css: undefined,
     origin: '',
+    cssLoader: '',
     mode: 'hybrid',
     tags: {},
     routeAliases: 'auto',
@@ -23,6 +31,13 @@ module.exports = function (moduleOptions) {
     ...moduleOptions
   }
 
+  if (options.css && !options.cssLoader) {
+    const matchedLoader = styleLoaders.find(({ test }) => options.css.match(test))
+    if (matchedLoader) {
+      options.cssLoader = matchedLoader.loader
+    }
+  }
+
   registerPlugin.call(this, options)
   registerRendererHook.call(this, options)
   ensureMeta.call(this, options)

diff --git a/templates/plugin.js b/templates/plugin.js
@@ -13,7 +13,7 @@ export default async function (ctx, inject) {
     Object.keys(result).forEach(key => inject(key, result[key]))
   }
   <% if (options.css) { %>if (ctx.$isAMP) {
-    const cssText = await import('!!raw-loader!sass-loader!<%= options.css %>').then(m => m.default || m)
+    const cssText = await import('!!raw-loader<%= options.cssLoader %>!<%= options.css %>').then(m => m.default || m)
     ctx.app.head.style.push({ cssText, type: 'text/css', 'amp-custom': '' })
   }<% } %>
 }