fix: check styleResources for existence (#4155)

packages/builder/src/builder.js

@@ -304,7 +304,7 @@ export default class Builder {
     } else if (this._nuxtPages) { // If user defined a custom method to create routes
       // Use nuxt.js createRoutes bases on pages/
       const files = {}
-      ;(await glob(`${this.options.dir.pages}/**/*.{vue,js}`, {
+        ; (await glob(`${this.options.dir.pages}/**/*.{vue,js}`, {
         cwd: this.options.srcDir,
         ignore: this.options.ignore
       })).forEach((f) => {

packages/webpack/src/builder.js

@@ -1,18 +1,23 @@
 import fs from 'fs'
+import path from 'path'
 import pify from 'pify'
 import webpack from 'webpack'
 import MFS from 'memory-fs'
+import Glob from 'glob'
 import webpackDevMiddleware from 'webpack-dev-middleware'
 import webpackHotMiddleware from 'webpack-hot-middleware'
 import consola from 'consola'
 
 import {
   parallel,
-  sequence
+  sequence,
+  wrapArray
 } from '@nuxt/common'
 
 import { ClientConfig, ServerConfig, PerfLoader } from './config'
 
+const glob = pify(Glob)
+
 export default class WebpackBuilder {
   constructor(context) {
     this.context = context
@@ -60,6 +65,18 @@ export default class WebpackBuilder {
       }
     }
 
+    // Check styleResource existence
+    const styleResources = this.context.options.build.styleResources
+    Object.keys(styleResources).forEach(async (ext) => {
+      await Promise.all(wrapArray(styleResources[ext]).map(async (p) => {
+        const styleResourceFiles = await glob(path.resolve(this.context.options.rootDir, p))
+
+        if (!styleResourceFiles || styleResourceFiles.length === 0) {
+          throw new Error(`Style Resource not found: ${p}`)
+        }
+      }))
+    })
+
     // Configure compilers
     this.compilers = compilersOptions.map((compilersOption) => {
       const compiler = webpack(compilersOption)

packages/webpack/src/config/utils/style-loader.js

@@ -1,3 +1,4 @@
+import path from 'path'
 import MiniCssExtractPlugin from 'mini-css-extract-plugin'
 
 import { wrapArray } from '@nuxt/common'
@@ -11,6 +12,7 @@ export default class StyleLoader {
     this.srcDir = options.srcDir
     this.assetsDir = options.dir.assets
     this.staticDir = options.dir.static
+    this.rootDir = options.rootDir
     this.loaders = options.build.loaders
     this.extractCSS = options.build.extractCSS
     this.resources = options.build.styleResources
@@ -31,7 +33,7 @@ export default class StyleLoader {
     // style-resources-loader
     // https://github.com/yenshih/style-resources-loader
     if (extResource) {
-      const patterns = wrapArray(extResource)
+      const patterns = wrapArray(extResource).map(p => path.resolve(this.rootDir, p))
 
       return {
         loader: 'style-resources-loader',

test/fixtures/missing-style-resource/nuxt.config.js

@@ -0,0 +1,5 @@
+export default {
+  styleResources: {
+    'stylus': './nothinghere'
+  }
+}

test/fixtures/with-config/assets/pre-process.css

@@ -0,0 +1,3 @@
+.pre-process-selector {
+  color: red;
+}

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

@@ -61,7 +61,7 @@ export default {
       logLevel: 'error'
     },
     styleResources: {
-      scss: '~/assets/pre-process.scss'
+      css: './assets/pre-process.css'
     },
     babel: {
       presets({ isServer }) {

test/unit/nuxt.test.js

@@ -56,4 +56,16 @@ describe('nuxt', () => {
       expect(s.includes('Plugin not found')).toBe(true)
     })
   })
+
+  test('Warn when styleResource isn\'t found', () => {
+    const nuxt = new Nuxt({
+      dev: false,
+      rootDir: resolve(__dirname, '..', 'fixtures', 'missing-style-resource')
+    })
+
+    return new Builder(nuxt).build().catch((err) => {
+      const s = String(err)
+      expect(s.includes('Style Resource not found')).toBe(true)
+    })
+  })
 })

test/unit/with-config.test.js

@@ -36,6 +36,11 @@ describe('with-config', () => {
     )).toBe(true)
   })
 
+  test('/ (styleResources styles inlined)', async () => {
+    const { html } = await nuxt.renderRoute('/')
+    expect(html).toContain('.pre-process-selector')
+  })
+
   test('/ (custom app.html)', async () => {
     const { html } = await nuxt.renderRoute('/')
     expect(html.includes('<p>Made by Nuxt.js team</p>')).toBe(true)