feat: add styleExtensions (#4671)

packages/config/src/config/_common.js

@@ -42,6 +42,7 @@ export default () => ({
     store: 'store'
   },
   extensions: [],
+  styleExtensions: ['css', 'pcss', 'postcss', 'styl', 'stylus', 'scss', 'sass', 'less'],
 
   // Ignores
   ignorePrefix: '-',

packages/core/src/resolver.js

@@ -46,7 +46,7 @@ export default class Resolver {
     return resolve(this.options.srcDir, path)
   }
 
-  resolvePath(path, { alias, module } = {}) {
+  resolvePath(path, { alias, module, isStyle } = {}) {
     // Fast return in case of path exists
     if (fs.existsSync(path)) {
       return path
@@ -80,8 +80,10 @@ export default class Resolver {
       }
     }
 
+    const extensions = isStyle ? this.options.styleExtensions : this.options.extensions
+
     // Check if any resolvedPath.[ext] or resolvedPath/index.[ext] exists
-    for (const ext of this.options.extensions) {
+    for (const ext of extensions) {
       if (!isDirectory && fs.existsSync(resolvedPath + '.' + ext)) {
         return resolvedPath + '.' + ext
       }

packages/vue-app/template/App.js

@@ -1,7 +1,7 @@
 import Vue from 'vue'
 <% if (loading) { %>import NuxtLoading from '<%= (typeof loading === "string" ? loading : "./components/nuxt-loading.vue") %>'<% } %>
 <% css.forEach((c) => { %>
-import '<%= relativeToBuild(resolvePath(c.src || c)) %>'
+import '<%= relativeToBuild(resolvePath(c.src || c, { isStyle: true })) %>'
 <% }) %>
 
 <%= Object.keys(layouts).map((key) => {

test/fixtures/with-config/nuxt.config.js

@@ -80,7 +80,7 @@ export default {
       })
     }
   },
-  css: [{ src: '~/assets/app.pcss' }],
+  css: [{ src: '~/assets/app' }],
   render: {
     csp: true,
     http2: {