diff --git a/bin/nuxt-dev b/bin/nuxt-dev index 5d0dda8be7..bac6c1cb82 100755 --- a/bin/nuxt-dev +++ b/bin/nuxt-dev @@ -84,24 +84,41 @@ function startDev(oldNuxt) { const port = argv.port || process.env.PORT || process.env.npm_package_config_nuxt_port const host = argv.hostname || process.env.HOST || process.env.npm_package_config_nuxt_host + // Error handler + const onError = (err, nuxt) => { + debug('Error while reloading [nuxt.config.js]', err) + return Promise.resolve(nuxt) // Wait for next reload + } + // Load options let options = {} try { options = loadNuxtConfig() } catch (err) { - console.error(err) - return // Wait for next reload + return onError(err, oldNuxt) } // Create nuxt and builder instance - const nuxt = new Nuxt(options) - const builder = new Builder(nuxt) + let nuxt + let builder + try { + nuxt = new Nuxt(options) + builder = new Builder(nuxt) + } catch (err) { + return onError(err, nuxt || oldNuxt) + } return Promise.resolve() - .then(() => builder.build()) // 1- Start build - .then(() => oldNuxt ? oldNuxt.close() : Promise.resolve()) // 2- Close old nuxt after successful build - .then(() => nuxt.listen(port, host)) // 3- Start listening - .then(() => nuxt) // 4- Pass new nuxt to watch chain + // Start build + .then(() => builder.build()) + // Close old nuxt after successful build + .then(() => oldNuxt ? oldNuxt.close() : Promise.resolve()) + // Start listening + .then(() => nuxt.listen(port, host)) + // Pass new nuxt to watch chain + .then(() => nuxt) + // Handle errors + .catch((err) => onError(err, nuxt)) } function loadNuxtConfig() { diff --git a/examples/style-resources/README.md b/examples/style-resources/README.md new file mode 100644 index 0000000000..58371a7551 --- /dev/null +++ b/examples/style-resources/README.md @@ -0,0 +1,3 @@ +# Using build.styleResources with Nuxt.js + +https://nuxtjs.org/examples diff --git a/examples/style-resources/assets/resources.scss b/examples/style-resources/assets/resources.scss new file mode 100644 index 0000000000..81a376da5c --- /dev/null +++ b/examples/style-resources/assets/resources.scss @@ -0,0 +1 @@ +$main: #ccc; diff --git a/examples/style-resources/nuxt.config.js b/examples/style-resources/nuxt.config.js new file mode 100644 index 0000000000..ed8339dee0 --- /dev/null +++ b/examples/style-resources/nuxt.config.js @@ -0,0 +1,9 @@ +module.exports = { + build: { + styleResources: { + patterns: [ + './assets/resources.scss' + ] + } + } +} diff --git a/examples/style-resources/package.json b/examples/style-resources/package.json new file mode 100644 index 0000000000..6e9386ab8b --- /dev/null +++ b/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" + } +} diff --git a/examples/style-resources/pages/index.vue b/examples/style-resources/pages/index.vue new file mode 100755 index 0000000000..d414f78af6 --- /dev/null +++ b/examples/style-resources/pages/index.vue @@ -0,0 +1,12 @@ + + + diff --git a/lib/app/components/no-ssr.js b/lib/app/components/no-ssr.js index 9dbc5bcbf5..6f69341528 100644 --- a/lib/app/components/no-ssr.js +++ b/lib/app/components/no-ssr.js @@ -17,11 +17,12 @@ export default { if (this.canRender) { if ( process.env.NODE_ENV === 'development' && + this.$slots.default && this.$slots.default.length > 1 ) { throw new Error(' You cannot use multiple child components') } - return this.$slots.default[0] + return this.$slots.default && this.$slots.default[0] } return h('div', { class: { 'no-ssr-placeholder': true } }, this.placeholder) } diff --git a/lib/builder/webpack/style-loader.js b/lib/builder/webpack/style-loader.js index 1e4b71171d..90f29d57be 100755 --- a/lib/builder/webpack/style-loader.js +++ b/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) } diff --git a/package.json b/package.json index 587da9634f..f82912b4eb 100644 --- a/package.json +++ b/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", diff --git a/test/basic.ssr.test.js b/test/basic.ssr.test.js index 9b9a4d62a8..e3dc4559b2 100755 --- a/test/basic.ssr.test.js +++ b/test/basic.ssr.test.js @@ -43,6 +43,12 @@ test('/css', async t => { t.is(window.getComputedStyle(element).color, 'red') }) +test('/postcss', async t => { + const window = await nuxt.renderAndGetWindow(url('/css')) + const element = window.document.querySelector('div.red') + t.is(window.getComputedStyle(element)['background-color'], 'blue') +}) + test('/stateful', async t => { const { html } = await nuxt.renderRoute('/stateful') t.true(html.includes('

The answer is 42

')) diff --git a/test/fixtures/basic/nuxt.config.js b/test/fixtures/basic/nuxt.config.js index e291976a5c..6d0b354c14 100644 --- a/test/fixtures/basic/nuxt.config.js +++ b/test/fixtures/basic/nuxt.config.js @@ -15,5 +15,10 @@ module.exports = { bad: null, '': true }, - transition: false + transition: false, + build: { + postcss: [ + require('postcss-cssnext')() + ] + } } diff --git a/test/fixtures/basic/pages/css.vue b/test/fixtures/basic/pages/css.vue index 902c7a07f2..08eca4556c 100755 --- a/test/fixtures/basic/pages/css.vue +++ b/test/fixtures/basic/pages/css.vue @@ -3,6 +3,10 @@ diff --git a/test/fixtures/with-config/postcss.config.js b/test/fixtures/with-config/postcss.config.js new file mode 100644 index 0000000000..a09f38e1b9 --- /dev/null +++ b/test/fixtures/with-config/postcss.config.js @@ -0,0 +1,17 @@ +const path = require('path') +const modulesDir = path.join(__dirname, '..', '..', '..', 'node_modules') +const rootDir = __dirname + +module.exports = { + plugins: { + 'postcss-import': { + root: rootDir, + path: [ + rootDir, + modulesDir + ] + }, + 'postcss-url': {}, + 'postcss-cssnext': {} + } +} diff --git a/test/with-config.test.js b/test/with-config.test.js index f179df1e39..0dd726da0c 100644 --- a/test/with-config.test.js +++ b/test/with-config.test.js @@ -44,6 +44,11 @@ test('/ (custom build.publicPath)', async t => { t.true(html.includes('src="/test/orion/vendor.')) }) +test('/ (custom postcss.config.js)', async t => { + const { html } = await nuxt.renderRoute('/') + t.true(html.includes('::-webkit-input-placeholder')) +}) + test('/test/ (router base)', async t => { const window = await nuxt.renderAndGetWindow(url('/test/')) const html = window.document.body.innerHTML